It is a great idea to use images from our CDN on HTML canvas. Unfortunately, browsers restrict access to canvas if an image was downloaded from an untrusted source. By default, only images from the same origin are treated as trusted. Calling
toDataURL() will result in
canvas.toDataURL(); // Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. canvas.getContext('2d').getImageData(0, 0, 100, 100); // Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
One of the solutions is using the
crossOrigin image property to ask the browser to request the image in a safe way.
This property is available only in Chrome and Firefox, but it is very easy to make such requests manually with the help of
This works well in Chrome 19+, Firefox 6+, IE 10+, Safari 6+, and Opera 15+.