Search code examples
javascriptcanvascross-domaincorsmjpeg

Canvas tainted by cross-origin data

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!

Solution

  • 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