Menu
I'm loading a motion jpeg from third-party site, which I can trust. I'm trying to getImageData() but the browser (Chrome 23.0) complains that:
Unable to get image data from canvas because the canvas has been tainted by cross-origin data. There are some similar questions on SO, but they are using local file and I'm using third party media. My script runs on a shared server and I don't own the remote server.
I tried img.crossOrigin = 'Anonymous' or img.crossOrigin = '' (see this post on the Chromium blog about CORS), but it didn't help. Any idea on how can I getImageData on a canvas with cross-origin data? Thanks!
253
By loading the canvas from cross origin domain, you are tainting the canvas. You can prevent this by setting crossorigin="anonymous" . However, CRAZILY enough, the order of the attribute on the img element does matter.
A tainted canvas is one which is no longer considered secure, and any attempts to retrieve image data back from the canvas will cause an exception to be thrown.
The website requires a canvas with images from a different origin which does not allow Cross Origin Resource Sharing (CORS). A canvas is considered 'tainted' by a browser if it has loaded images from a different origin that does not set the Access-Control-Allow-Origin header correctly.
Also, there is no way to "untaint" a canvas, even if clearRect is called on the full area of the canvas, the canvas will still be flagged as tainted. You have to create a new canvas and redraw everything except the compromised part in such cases.
You cannot reset the crossOrigin flag once it is tainted, but if you know before hand what the image is you can convert it to a data url, see Drawing an image from a data URL to a canvas
But no, you cannot and should not be using getImageData() from external sources that don't support CORS
132
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
