HTMLImageElement: crossOrigin property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

ThecrossOrigin property of theHTMLImageElement interface is a string which specifies the Cross-Origin Resource Sharing (CORS) setting to use when retrieving the image. It reflects the<img> element'scrossorigin content attribute.

Value

A string whose value is one ofanonymous oruse-credentials. For their meanings, see the HTMLcrossorigin attribute reference.

Examples

Setting the crossorigin attribute

In this example, a new<img> element is created and added to the document, loading the image with the Anonymous state; the image will be loaded using CORS and credentials will be used for all cross-origin loads.

JavaScript

The code below demonstrates setting thecrossOrigin property on an<img> element to configure CORS access for the fetch of a newly-created image.

const container = document.querySelector(".container");function loadImage(url) {  const image = new Image(200, 200);  image.addEventListener("load", () => container.prepend(image));  image.addEventListener("error", () => {    const errMsg = document.createElement("output");    errMsg.value = `Error loading image at ${url}`;    container.append(errMsg);  });  image.crossOrigin = "anonymous";  image.alt = "";  image.src = url;}loadImage("/shared-assets/images/examples/balloon.jpg");

HTML

html

<div>  <p>    Here's a paragraph. It's a very interesting paragraph. You are captivated by    this paragraph. Keep reading this paragraph. Okay, now you can stop reading    this paragraph. Thanks for reading me.  </p></div>

CSS

css

body {  font:    1.125rem/1.5 "Helvetica",    "Arial",    sans-serif;}.container {  display: flow-root;  width: 37.5em;  border: 1px solid #d2d2d2;}img {  float: left;  padding-right: 1.5em;}output {  background: rgb(100 100 100 / 100%);  font-family: "Courier New", monospace;  width: 95%;}