lundi 1 décembre 2014

Fastest way to check whether image (img HTML element) is not protected by CORS


I occurred to have a problems when I copied image from a site (context menu->copy image) and pasted it in my script (in contenteditable div). <img> appears in the div, however an attempt to drawImage it on <canvas> will cause errors if you try to get image data of the canvas:


Security error: the operation is insecure


You can draw on the canvas without errors, but not retrieve the pixel data or DataURL. In cases of such images, I'd like to use CORS proxy to have full access to the data.


How can detect that I have no right to access data of <img> tag or URL? What's the fastest way?


I had this problem (and still have) in a image paste upload script for StackExchange.


Edit: Further explanations of the problem if you're still not sure what do I mean:


Why try/catch is not a solution?


You can draw any image on canvas and you can even perform further draw operations:


CORS


The image source. It doesn't allow CORS!


Why parsing the URL doesn't help?


Some remote images allow CORS and do not throw any errors. For example the avatars from Gravatar.





Aucun commentaire:

Enregistrer un commentaire