Image data error

Question

I was trying to create some sort of simple Photoshop, but when I used getImageData I got this error.

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': the canvas has been tainted with cross-origin data.

It is not a problem with the image, because I have tried multiple.

image.crossOrigin = "Anonymous"; gives another error.

My guess is that it won't work in SoloLearn, but maybe someone knows how it will work or why it doesn't work.

Answer 1

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

Maybe a solution here (seems not work in IE):
https://coderwall.com/p/pa-2uw/using-external-images-with-canvas-getimagedata-and-todataurl

... or here (but seems to be the 'anonymous' one you've already tried):
https://blog.codepen.io/2013/10/08/cross-domain-images-tainted-canvas/

Or dive into lot of related questions in Stackoverflow:
https://stackoverflow.com/questions/19869150/getimagedata-cross-origin-error
https://stackoverflow.com/questions/22097747/how-to-fix-getimagedata-error-the-canvas-has-been-tainted-by-cross-origin-data
https://stackoverflow.com/questions/15574848/tainted-canvas-cross-origin-data
https://stackoverflow.com/questions/34826748/issue-with-crossorigin-anonymous-failing-to-load-images
https://stackoverflow.com/questions/13674835/canvas-tainted-by-cross-origin-data
https://stackoverflow.com/questions/9972049/cross-origin-data-in-html5-canvas

Answer 2

A <base> tag* comes into documents here, setting the origin to "about:blank". I've looked into this a fair amount and posted / coded workarounds for several cases, but mostly it comes down to "local origin" and a couple workarounds.

If there's any way you could provide a "smallest representative sample" that still has the problem​, it may be helpful (hard to say).

* https://code.sololearn.com/WVxar9XmY1N4/?ref=app

Answer 3

I will check them out later, thank you for your time.