Question

125

How do you simply obtain an array of pixel data from an image?

rated 0 times [ 129] [ 4] / answers: 1 / hits: 22844 / 12 Years ago, thu, december 20, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jazmyne

Add To Favorites

Follow

Total Points: 503

Total Questions: 102

Total Answers: 99

Location: Svalbard and Jan Mayen

Member since Sun, Sep 25, 2022

2 Years ago

jazmyne questions

1 Prisma: update nested entities in a single query

Tue, May 3, 22, 00:00, 2 Years ago

1 How to create a new sheet in an existing xlsx file using xlsx/sheetjs package in node js?

Mon, Dec 14, 20, 00:00, 4 Years ago

1 npx degit could not find commit hash for master

Tue, Dec 1, 20, 00:00, 4 Years ago

1 How to open a new tab with a post request from a component in Angular

Mon, Oct 26, 20, 00:00, 4 Years ago

1 Does Next.js Needs a Node Server Running?

Tue, Apr 21, 20, 00:00, 4 Years ago

View All

answered 12 Years ago dajah · Accepted 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.