如何操纵画布中的像素？

Question

让我解释一下我想达到什么..

我建立的东西只是为了好玩，并作为学习实验类似

www.milliondollarhomepage.com

除此之外，我想用画布和/或Fabric.js来实现相同的目的。我将如何去操纵画布中的每个像素？

场景：

• 我想提供一个1000个像素的争夺。
• 用户可以选择一幅图像，并将其放在画布上
• 图像可根据用户想要的像素大小以及从整体剩余像素中扣除的像素大小进行调整。

任何帮助，将不胜感激！

Answer 1

用于操纵各个像素在HTML5画布API的方法是

context.getImageData(x,y,width,height); 

例如

var map = context.getImageData(0,0,canvas.width,canvas.height); 

这将返回一个包含重复顺序大规模阵列：

[red,green,blue,alpha,red,green,blue,alpha...] 

每个4数字代表红色，绿色，蓝色和alpha通道f或选定区域上的每个像素，从左到右，从上到下。

这些数字中的每一个的值都是从0 - 255开始的整数。

要遍历每个像素，并放弃他们red和blue渠道，从而把图像绿，例如

//assume map variable from earlier 

for(var i = 0; i < map.data.length; i+=4){ 
    map.data[i] = 0; // drop red to 0 
    map.data[i+2] = 0; // drop blue to 0 
} 
context.putImageData(map,0,0); 

See Example

注意，这个过程只能在服务器上完成，没有来自其他领域的图像“污染”画布。如果这些要求不符合，则会抛出安全错误DOM异常。