HTML <img> crossorigin Attribute

Example

<img crossorigin="anonymous" src="img-boy.jpg" alt="Boy" width="300" height="200">

Try this code ❯

Meaning

The crossorigin attribute specifies the fetching of the image must be done using a Cross-Origin Resource Sharing request. Image data from a Cross-Origin Resource Sharing enabled image returned from a Cross-Origin Resource Sharing request can be reused in the <canvas> element without being marked "tainted".

If the crossorigin attribute is not specified, then a non Cross-Origin Resource Sharing request is sent without the Origin request header and the browser marks the image as tainted and restricts access to its image data, preventing its usage in <canvas> elements.

If the crossorigin attribute is specified, then a Cross-Origin Resource Sharing request is sent with the Origin request header but if the server does not opt into allowing cross-origin access to the image data by the origin site then the browser blocks the image from loading, and logs a Cross-Origin Resource Sharing error to the developer tools console.

Standard Syntax

HTML: <img crossorigin="anonymous|use-credentials" src="URL" alt="text">,
XHTML: <img crossorigin="anonymous|use-credentials" src="URL" alt="text" />

Attribute Values