javascript 循环遍历图像中的像素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17714742/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Looping through pixels in an image
提问by user2517142
My project is to input an image into a canvas tag in an HTML page, and then loop through the pixels and RGBA values of the pixels. While looping through the red values,so every fourth value in the pixel, I want to log the position of the pixels that represent a white pixel. Now, I have the image loading down with some code I got from this blog, http://www.phpied.com/photo-canvas-tag-flip/.
我的项目是在HTML页面的canvas标签中输入一张图片，然后循环遍历像素的像素和RGBA值。在循环遍历红色值时，因此像素中每四个值，我想记录代表白色像素的像素的位置。现在，我用我从这个博客http://www.phpied.com/photo-canvas-tag-flip/得到的一些代码加载了图像。
He has another post in which he gives some code on how to loop through the pixels and log the information I want to log, but I don't understand it, and I don't want to copy his code without knowing what it is I'm doing. So could anybody please either explain the method he's using or perhaps show me another way to do what he's doing? This is the link to the other post http://www.phpied.com/pixel-manipulation-in-canvas/.
他在另一篇文章中给出了一些关于如何遍历像素并记录我想记录的信息的代码，但我不明白，而且我不想在不知道是什么的情况下复制他的代码正在做。那么有人可以解释他正在使用的方法，或者向我展示另一种方法来做他正在做的事情吗？这是另一个帖子的链接http://www.phpied.com/pixel-manipulation-in-canvas/。
回答by markE
It's straightforward.
这很简单。
All the pixel data for a canvas are stored sequentially in an array.
画布的所有像素数据按顺序存储在一个数组中。
The first pixel's data occupy array elements #0-3 (red=0/green=1/blue=2/alpha=3).
第一个像素的数据占据数组元素#0-3 (red=0/green=1/blue=2/alpha=3)。
The second pixel's data occupy array elements #4-7 (red=4/green=5/blue=6/alpha=7).
第二个像素的数据占据数组元素#4-7 (red=4/green=5/blue=6/alpha=7)。
And so on...
等等...
You can load that pixel data by using context.getImageData() and enumerating through the array.
您可以通过使用 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];
}
You can also change those array values and then save the array back to the image using context.putImageData().
您还可以更改这些数组值，然后使用 context.putImageData() 将数组保存回图像。
// save any altered pixel data back to the context
// the image will reflect any changes you made
context.putImageData(imgData, 0, 0);
The image will then change according to the changes you made to its pixel array.
然后图像将根据您对其像素阵列所做的更改而更改。
Each pixel contains 4 components red, green, blue, alpha - each of them is number 0-255. The loop starts from top-left to bottom-right.
每个像素包含 4 个分量：红、绿、蓝、alpha——每个分量都是数字 0-255。循环从左上角开始到右下角。
回答by Gabriel Ambrósio Archanjo
I recommend you to use an image processing framework in order to focus on the algorithms instead of manipulating arrays of values. Some frameworks:
我建议您使用图像处理框架，以便专注于算法而不是操作值数组。一些框架：
In the case of MarvinJ, you can simply loop through pixels iterating column and row coordinates. I use the methods getIntComponentX()to access color components.
在 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);
}
}
Therefore you don't need to worry about how the pixel data is represented. In order to check if a pixel is white:
因此，您无需担心像素数据的表示方式。为了检查像素是否为白色：
// Is white?
if(red >= 250 && blue >= 250 && green >= 250){
console.log("Pixel at "+x+","+y+" is white");
}
Runnable Example:
可运行示例：
var canvas = document.getElementById("canvas");
image = new MarvinImage();
image.load("https://i.imgur.com/eLZVbQG.png", imageLoaded);
function imageLoaded(){
var whitePixels=0;
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);
var alpha = image.getAlphaComponent(x,y);
// Is white?
if(red >= 250 && green >= 250 && blue >= 250 && alpha > 0){
whitePixels++;
}
}
}
image.draw(canvas);
document.getElementById("result").innerHTML = "white pixels: "+whitePixels;
}<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>
<canvas id="canvas" width="500" height="344"></canvas>
<div id="result"></div>