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 untrusted source. By default only images from the same origin are treated as trusted. If you’ll draw the image from other origins, the canvas will be marked as “dirty” and no pixel read will be possible from the canvas.
toDataURL() will lead to
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 solutions is using the
crossOrigin image property to ask browser to request the image in a safe way.
Unfortunately this property is available only in Chrome and Firefox. But it is very easy to make such request manually with the help of
This works well in Chrome 19+, Firefox 6+, IE 10+, Safari 6+ and Opera 15+.