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.

Das HTMLImageElement Interface besitzt das Attribut crossOrigin, ein Zeichenfolgenattribut, das die Cross-Origin Resource Sharing (CORS) Einstellung angibt, die beim Abrufen des Bildes genutzt werden soll.

Wert

Eine Zeichenfolge eines Schlüsselworts, das den CORS-Modus angibt, der beim Abrufen der Bildressource verwendet werden soll. Wenn Sie crossOrigin nicht angeben, wird das Bild ohne CORS abgerufen (der no-cors Modus des Fetches).

Erlaubte Werte sind:

anonymous: Anfragen des <img>-Elements haben ihren mode auf cors gesetzt und ihren credentials Modus auf same-origin. Das bedeutet, dass CORS aktiviert ist und Anmeldedaten gesendet werden, wenn das Bild von der gleichen Herkunft abgerufen wird, von der das Dokument geladen wurde.
use-credentials: Anfragen des HTMLImageElement verwenden den cors-Modus und den include-Anmeldemodus; alle Bildanforderungen des Elements verwenden CORS, unabhängig von der Domain, von der der Abruf erfolgt.

Wenn crossOrigin eine leere Zeichenfolge ("") ist, wird der anonymous-Modus ausgewählt.

Beispiele

In diesem Beispiel wird ein neues <img>-Element erstellt und dem Dokument hinzugefügt. Das Bild wird im anonymen Zustand geladen; das Bild wird unter Verwendung von CORS geladen, und Anmeldedaten werden für alle Cross-Origin-Ladevorgänge verwendet.

JavaScript

Der untenstehende Code zeigt, wie die crossOrigin-Eigenschaft auf einem <img>-Element gesetzt wird, um den CORS-Zugriff für das Abrufen eines neu erstellten Bildes zu konfigurieren.

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

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