你如何简单地从图像获取像素数据的数组？ [英] How do you simply obtain an array of pixel data from an image?
问题描述
感谢大家的回应。我应该更具体的我的问题。我看了一些例子，但这里是来自W3学校的一个（谢谢@Pointy指出，这不是一个源应该依赖 - 没有双关语）。
下面是如何访问像素RGBA详细信息：
imageData = context.getImageData（imageX，imageY，imageWidth，imageHeight）; //获取图像数组
//下面是如何访问你的像素细节
red = imgData.data [0];
green = imgData.data [1];
blue = imgData.data [2];
alpha = imgData.data [3];
编辑：
您编辑的问题的答案是：
document.getElementById（data）。innerHTML = imgData.data.toString（）;
或者你可以使用循环遍历数组并打印一个元素， / p>
for（i = 0; i document.getElementById（data ）.innerHTML + = imgData.data [i];
}
我希望这有帮助。
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).
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.
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:
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.
This should be exactly what you need :
http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/
Below is how to access to a pixel RGBA details:
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.
这篇关于你如何简单地从图像获取像素数据的数组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
