0

On the Mozilla Developer Network page, there's an example where you can create a color picker with the help of getImageData(). You can check out the code at https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas#A_color_picker.

It seems to work fine on the MDN page. But on CodePen or JSFiddle, it's broken. I tried to follow the instruction with a similar problem, and I get this error when setting img.src to an url: Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'. Hope someone can help me.

Mistalis
  • 17,793
  • 13
  • 73
  • 97
Huy Tran
  • 1,770
  • 3
  • 21
  • 41
  • This looks like CORS [problem](http://stackoverflow.com/questions/22097747/how-to-fix-getimagedata-error-the-canvas-has-been-tainted-by-cross-origin-data) – Legends Apr 04 '17 at 20:59
  • @Legends Yes it is. It was fixed with `img.crossOrigin = "Anonymous". But a problem still persists. Everytime I want to test my code, I have to turn off the tab and turn it back on again. It works only once when I first open it. Refreshing with F5 throws the tainted canvas error. Is there a way I can test my code without having to restart the tab? And will this problem affect other people when they try to refresh my game on their computer? – Huy Tran Apr 05 '17 at 06:38

2 Answers2

2

If you add this line in the JS section after the img src and reload the page, the example will work.

img.crossOrigin = "Anonymous"

It has to do with cross-origin contamination and HTML canvas. Apparently if an element comes from a different domain then the canvas becomes tainted and you can't pull data from it, unless you give set the correct cross origin attribute with the line above. This error could also happen if the headers weren't set on the image when it was sent from the source.

There's more information at this blog post from CodePen: https://blog.codepen.io/2013/10/08/cross-domain-images-tainted-canvas/

Here's a link to a CodePen that works!
http://codepen.io/illuminatedspace/pen/WpWQmo?editors=1010#0

illuminatedSpace
  • 66
  • 5
  • Great! It works now. But everytime I want to test my code, I have to turn off the tab and turn it back on again. It works only once when I first open it. Refreshing with F5 throws the **tainted canvas error**. Is there a way I can test my code without having to restart the tab? And will this problem affect other people when they try to refresh my game on their computer? – Huy Tran Apr 05 '17 at 06:34
  • I don't fully understand what you mean by turn off the tab. I don't get that problem with the example on code pen so I'm assuming you're talking about a different context. If I saw a code snippet maybe I could help further. – illuminatedSpace Apr 05 '17 at 21:49
  • The problem with my code is exactly like this CodePen [link](http://codepen.io/illuminatedspace/pen/WpWQmo?editors=1010#0). It somehow only works when the page is first open. When I refresh the page with **F5**, it starts throwing **tainted canvas error** again. Only when I hit **x** to close the tab, and then click the link to open a brand new tab will it work again. – Huy Tran Apr 06 '17 at 11:36
  • I got it working. Just have to set `img.crossOrigin = "Anonymous"` before img.src – Huy Tran Apr 06 '17 at 12:28
  • It's interesting that you were having that error. I wasn't getting any errors with the code pen I sent. Glad it's working now. Would you mind choosing the answer if it solved the problem? – illuminatedSpace Apr 06 '17 at 13:12
0

Why their codepen example doesn't work:

"Although you can use images without CORS approval in your canvas, doing so taints the canvas. Once a canvas has been tainted, you can no longer pull data back out of the canvas. For example, you can no longer use the canvas toBlob(), toDataURL(), or getImageData() methods" (Ironically also from MDN)

daniel
  • 112
  • 6