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
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+.
Often you may want to allow user to choose previously uploaded files again. Uploadcare doesn't store relations between users and files and also doesn't allow the widget to list all files in the project for security reasons.
There are two ways to handle the files-to-user relations:
Following example shows how to add local storage history tab with following features:
Images only with crop: