循环通过图像中的像素

Question

我的项目是将图像输入到HTML页面中的canvas标签中,然后循环遍历像素的像素和RGBA值.循环遍历红色值,所以像素中的每四个值,我想记录代表白色像素的像素的位置.现在,我已经用这个博客中的一些代码加载了图像,http://www.phpied.com/photo-canvas-tag-flip/.

他还有另一篇文章,他提供了一些关于如何循环像素并记录我想要记录的信息的代码,但是我不明白它,我不想复制他的代码而不知道它是什么我我在做.那么,任何人都可以解释他正在使用的方法,或者可能告诉我另一种方法来做他正在做的事情？这是http://www.phpied.com/pixel-manipulation-in-canvas/的其他帖子的链接.

Answer 1

这很简单.

画布的所有像素数据按顺序存储在数组中.

第一像素的数据占据阵列元素#0-3(红色= 0 /绿色= 1 /蓝色= 2 /α= 3).

第二像素的数据占据阵列元素#4-7(红色= 4 /绿色= 5 /蓝色= 6 /α= 7).

等等...

您可以使用context.getImageData()并通过数组枚举来加载该像素数据.

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

// enumerate all pixels
// each pixel's r,g,b,a datum are stored in separate sequential array elements

for(var i=0; i<data.length; i+=4) {
  var red = data[i];
  var green = data[i+1];
  var blue = data[i+2];
  var alpha = data[i+3];
}

您还可以更改这些数组值,然后使用context.putImageData()将数组保存回图像.

// save any altered pixel data back to the context
// the image will reflect any changes you made

context.putImageData(imgData, 0, 0);

然后,图像将根据您对其像素阵列所做的更改而更改.

Answer 2

我建议您使用图像处理框架，以便专注于算法而不是操作值数组。一些框架：

• Fabric.js
• 处理.js
• 马文杰

对于 MarvinJ，您可以简单地循环遍历像素迭代列和行坐标。我使用getIntComponentX()方法来访问颜色分量。

for(var y=0; y<image.getHeight(); y++){
    for(var x=0; x<image.getWidth(); x++){
        var red = image.getIntComponent0(x,y);
        var green = image.getIntComponent1(x,y);
        var blue = image.getIntComponent2(x,y);
    }
}

因此您无需担心像素数据的表示方式。为了检查像素是否是白色：

// Is white?
if(red >= 250 && blue >= 250 && green >= 250){
    console.log("Pixel at "+x+","+y+" is white");
}

可运行示例：

for(var y=0; y<image.getHeight(); y++){
    for(var x=0; x<image.getWidth(); x++){
        var red = image.getIntComponent0(x,y);
        var green = image.getIntComponent1(x,y);
        var blue = image.getIntComponent2(x,y);
    }
}

// Is white?
if(red >= 250 && blue >= 250 && green >= 250){
    console.log("Pixel at "+x+","+y+" is white");
}