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%;}