Jump to content

Image data


Recommended Posts


is it possible to access pixel data of single image in javascript? I have only found example of people using context.getImageData() to get the canvas pixel data but I need the image data so I can draw different color of images. is this possible?


Link to comment
Share on other sites

Yes. context.getImageData() gets you an object with 3 properties: width, height and data. The last of these is an array of pixel data. 4 elements per pixel: red, green, blue and alpha. The last means transparency. You can read and write the elements of this array as you like and then context.putImageData() when complete (don't put after every change - performance would be awful). I usually add 2 methods to ImageData for pixel read/write:

/* Returns an array with 4 elements: RGBA. */
ImageData.prototype.getPixel = function (x, y)
{ var i = (this.width * Math.round (y) + Math.round (x)) * 4;
  // NB: JavaScript will try to index arrays with non-integers!
  return [this.data [i], this.data [i + 1], this.data [i + 2], this.data [i + 3]];

/* rgba is an array with 4 elements: RGBA. Ignores transparent pixels (A = 0). */
ImageData.prototype.setPixel = function (x, y, rgba)
{ if (0 === rgba [3]) return;
  var i = (this.width * Math.round (y) + Math.round (x)) * 4;
  this.data [i] = rgba [0];
  this.data [i + 1] = rgba [1];
  this.data [i + 2] = rgba [2];
  this.data [i + 3] = rgba [3];

Generally when I am wanting to do things on the canvas I do it in stages, some stages use standard context methods, other stages switch to pixel data as above. Keep the number of switches small.

Edited by grelf
Link to comment
Share on other sites

hey @grelf thx for the code but how do I apply this to the image? what I am trying to do is have a single .png file with flag shape in it and then change the color of that flag according to the team color

Edit: And what I should have said is that I have done this type of thing before, many times. I just can't figure how to get access image's data

Edited by jar4563
Link to comment
Share on other sites

putImageData() into the main canvas using the ImageData object that you have been working with from the hidden canvas. The ImageData object, once obtained, is not tied to any particular canvas, it is just a collection of pixel data.

Link to comment
Share on other sites

I have some weird error when I try to use getImageData()


flag = new Image();
flag.src = "flag.png";
//flag.crossOrigin = "Anonymous";
testImageData = null;

flag.addEventListener('load', function() {

var canv = document.createElement("canvas");
canv.width = flag.width;
canv.height = flag.height;
var ctx = canv.getContext("2d");
ctx.drawImage (flag, 0, 0);

console.log(">>> " + canv + " " + flag + " -- " + flag.width);

testImageData = ctx.getImageData(0, 0, canv.width, canv.height);

, false);




test.html:51 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
    at Image.<anonymous>



Link to comment
Share on other sites

34 minutes ago, grelf said:

I would create the onload function before setting flag.src, so the event handler is available before loading starts. I am not sure whether this will solve your problem but it might.


nope did not. thx



fortunately this was fixed by:  --allow-file-access-from-files  argument for chrome

Edited by jar4563
Link to comment
Share on other sites

Ah, yes that makes sense. I was just about to write that the "cross-origin" thing was a clue. I use Netbeans IDE (free) which has its own lightweight localhost server so I can run tricky things from local files without me having to set anything else up.

Link to comment
Share on other sites

I am having issue with the transparency, the alpha = 0 turn into white even I'm skipping alpha = 0 pixels

Edit: I think it's because the canvas is white by default. anyway to make it transparent?

Edited by jar4563
Link to comment
Share on other sites

  • 2 weeks later...

Has anyone got the transparency working with putImageData ? It seems that even I put transparent pixels in the imagedata the putImageData ignores those and puts gray pixels or something to the canvas instead


Edited by jar4563
Link to comment
Share on other sites

nevermind. had some spaghetti code that didn't work. now it works and this is a valid method :)

Edit: At least I assume we use the same method as I am using one with off screen canvas. and then that offscreen canvas is drawn using drawImage()

Edited by jar4563
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...