CODEWITHSUNDEEP
javascripthtmlimagecanvascors
Max
Max

Reputation: 1013

Is there a way to determine if a cross-origin image would taint the canvas without painting it?

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?

Upvotes: 0

Views: 173

Answers (1)

Kaiido
Kaiido

Reputation: 136717

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.

Upvotes: 2

Related Questions