Html Crossorigin Attribute For Img Tag

I am trying to understand how to use the crossorigin attribute for the img tag. I couldn't find a good example (The ones I found about CORS enabled images are explained with JavaSc

Solution 1:

Since you are using the #image element as the source for your image, the 2 versions of your code are roughly equivalent.

But...

The version without crossorigin="anonymous" in the img element will probably still generate a cross-domain violation.

That's because the image is originally loaded into the img element without the cross-origin flag set to anonymous.

The javascript code will likely use the cached version of the image from the img element rather than trying to reload it from http://...

This means the cached image data will still taint the canvas as containing cross-origin content.

BTW, a syntax error in your code:

// Not:  img.src = document.getElementById("image").value;

img.src = document.getElementById("image").src;