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 Standard
# dom-img-crossorigin

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch