Canvas tainted by cross-origin data

javascript canvas cross-domain cors mjpeg
clwen picture clwen · Dec 2, 2012 · Viewed 48.8k times · Source

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!

Answer

Paul Kaplan picture Paul Kaplan · Dec 3, 2012

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

Related questions

Why does canvas.toDataURL() throw a security exception?

Did I not get enough sleep or what? This following code var frame=document.getElementById("viewer"); frame.width=100; frame.height=100; var ctx=frame.getContext("2d"); var img=new Image(); img.src="http://www.ansearch.com/images/interface/item/small/image.…

Read More
Cross-origin data in HTML5 canvas

I'm loading an image in js and draw it into a canvas. After drawing, i retrieve imageData from the canvas: var img = new Image(); img.onload = function() { canvas.drawImage(img, 0, 0); originalImageData = canvas.getImageData(0,0,width, height)); //chrome fails } img.src = 'picture.…

Read More
How to use Fabric.js to save a canvas as an image

I have a Fabric.js prototype where people can load photos, text, and maps into the canvas. When they're done, I want them to be able to save the canvas as an image. I've tried using the standard: canvasURL = canvas.…

Read More