How do you simply obtain an array of pixel data from an image?
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.
Answer
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.