javascript 如何简单地从图像中获取像素数据数组？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13963308/
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
How do you simply obtain an array of pixel data from an image?
提问by Hymanmc1047
Thank you all for responding. I should have been more specific with my question. I looked at a number of examples, but here is the one from W3 Schools (thank you @Pointy for pointing out that this is not a source one should rely on - no pun intended).
谢谢大家的回复。我应该对我的问题更具体。我查看了许多示例，但这里是来自 W3 Schools 的示例（感谢@Pointy 指出这不是一个应该依赖的来源 - 无意双关语）。
http://www.w3schools.com/tags/canvas_getimagedata.asp
http://www.w3schools.com/tags/canvas_getimagedata.asp
<!DOCTYPE html>
<html>
<body>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
document.getElementById("scream").onload = function () {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 0, 0);
var imgData = ctx.getImageData(0, 0, c.width, c.height);
// invert colors
for (var i = 0; i < imgData.data.length; i += 4) {
imgData.data[i] = 255 - imgData.data[i];
imgData.data[i + 1] = 255 - imgData.data[i + 1];
imgData.data[i + 2] = 255 - imgData.data[i + 2];
imgData.data[i + 3] = 255;
}
ctx.putImageData(imgData, 0, 0);
};
</script>
</body>
</html>
First of all I am a bit confused since the example on the W3 Schools website shows the pixel colors of the image being inverted, but when I copy the code into Sublime Text 2, save it, and open it in Chrome, the pixel colors of the image do not become inverted and the image just appears exactly the same again next to it.
首先我有点困惑，因为 W3 Schools 网站上的示例显示图像的像素颜色被反转，但是当我将代码复制到 Sublime Text 2 中，保存它，并在 Chrome 中打开它时，图像不会倒置，图像只是在它旁边再次显示完全相同。
My main question is how can I add a line to this code to show the entire array of pixel data for the image?
我的主要问题是如何向此代码添加一行以显示图像的整个像素数据数组？
I added an empty div with an id of "data" below the image and added the following code but the entire array of pixel data did not appear:
我在图像下方添加了一个 id 为“data”的空 div 并添加了以下代码，但没有出现整个像素数据数组：
document.getElementById("data").innerHTML=imgData.data;
I also tried to see at least the length of the pixel data array by adding the follow, but it did not work:
我还尝试通过添加以下内容来至少查看像素数据数组的长度，但它不起作用：
document.getElementById("data").innerHTML=imgData.data.length;
I have looked at a few examples of manipulating image pixel data from various sources and attempted a number of times to get the entire array of pixel data but was not able to.
我查看了一些处理来自各种来源的图像像素数据的示例，并多次尝试获取整个像素数据阵列，但未能成功。
I would like to view the array of pixel data to recognize characters or imagery within the picture and to begin to see patterns that may emerge from specific things in the image.
我想查看像素数据阵列以识别图片中的字符或图像，并开始查看可能从图像中的特定事物中出现的模式。
Thanks so much for your help.
非常感谢你的帮助。
采纳答案by Mehdi Karamosly
This should be exactly what you need :
这应该正是您所需要的：
http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/
http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/
Below is how to access to a pixel RGBA details:
以下是如何访问像素 RGBA 详细信息：
imageData = context.getImageData(imageX, imageY, imageWidth, imageHeight); // get the image array
//below is how to access to your pixel details
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Edit:The answer to your edited question is :
编辑：您编辑的问题的答案是：
document.getElementById("data").innerHTML=imgData.data.toString();
or you can use a loop to iterate over the array and print an element each time like below:
或者您可以使用循环遍历数组并每次打印一个元素，如下所示：
for(i=0 ; i< imgData.data.length ; i++){
document.getElementById("data").innerHTML += imgData.data[i];
}
I hope this helps.
我希望这有帮助。
