I'm writing a script that allows a user to enter an image URL. I'd like to draw it to the canvas - but only if CORS policy allows me to do so without tainting the canvas. Is there a straightforward way of determining whether the image would taint the canvas without first drawing it to a canvas?

CodePudding user response：

Since you've been given the URL, you can simply force the HTMLImageElement's crossOrigin to be set to "anonymous". If the image loads, it won't taint your canvas*, if its error event fired... you won't be able to draw it.

*Well, there is one case where this could still happen: if the image represents an other security threat for the browser, e.g svg images with <foreignObject> in Safari. For these edge cases, drawing on a 1x1 canvas is the only way to know.