HTMLImageElement: crossOrigin-Eigenschaft

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.

Die crossOrigin-Eigenschaft des HTMLImageElement Interfaces ist ein String, der die Cross-Origin Resource Sharing (CORS) Einstellung angibt, die beim Abrufen des Bildes verwendet werden soll.

Wert

Ein String eines Schlüsselworts, das den CORS-Modus angibt, der beim Abrufen der Bildressource verwendet wird. Wenn Sie crossOrigin nicht angeben, wird das Bild ohne CORS abgerufen (der Abrufmodus no-cors).

Erlaubte Werte sind:

anonymous

Anfragen durch das <img>-Element haben ihren mode auf cors gesetzt und ihren credentials Modus auf same-origin gesetzt. Das bedeutet, dass CORS aktiviert ist und Anmeldeinformationen gesendet werden, wenn das Bild von derselben Herkunft abgerufen wird, von der das Dokument geladen wurde.

use-credentials

Anfragen durch das HTMLImageElement verwenden den cors-Modus und den include-Anmeldeinformationenmodus; alle Bildanfragen durch das Element verwenden CORS, unabhängig davon, von welcher Domain der Abruf stammt.

Wenn crossOrigin ein leerer String ("") ist, wird der anonymous-Modus ausgewählt.

Beispiele

In diesem Beispiel wird ein neues <img>-Element erstellt und dem Dokument hinzugefügt, wobei das Bild im Anonymous-Zustand geladen wird; das Bild wird mit CORS geladen und Anmeldeinformationen werden für alle Cross-Origin-Ladevorgänge verwendet.

JavaScript

Der unten stehende Code demonstriert das Setzen der crossOrigin-Eigenschaft an einem <img>-Element zur Konfiguration des CORS-Zugriffs für den Abruf eines neu erstellten Bildes.

js
const imageUrl = "clock-demo-400px.png";
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(imageUrl);

HTML

html
<div class="container">
  <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,
    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, monospace;
  width: 95%;
}

Ergebnis

Spezifikationen

Specification
HTML
# dom-img-crossorigin

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
crossOrigin

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch