Pixel Rgb Values Are All Zero

I want to iterate through pixels of canvas and get their colors as RGB but all pixels have 0,0,0 RGB value even though there is an image on canvas. Here is my code; (my test image

Solution 1:

working example - http://jsfiddle.net/mwPfa/3/

These were few things to mention:

1. window.onload - in jsfiddle you dont need to use it.
2. becouse of CORS, if you want to load image form external domain in jsfiddle, you have to use image that supports it and load in with img.crossOrigin = "Anonymous"; - not every image will work here.
3. if you want to access image data - you HAVE to wait until image is loaded, so draw image and access the data only in onload handler. You dont want to access canvas data before image was loaded... It works sometimes, but you want stable code, that works everytime everwhere, don't you?
4. RGB with values 0,0,0 means valid black color, so make sure you don't test image with black top-left corner.

Solution 2:

This is most likely because your canvas is tainted and the web browser security does not allow you to read it's data. This is because of cross-domain security: you are loading images or videos from other domain and drawing them on the canvas. If there were no cross-domain security you could e.g. steal users Facebook photos and such.

Mozilla Developer Network has an excellent article how to deal with the issue

• https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

However, my suggestion is that if possible load your HTML pages and images from the same domain to avoid the CORS issues.