HTMLImageElement: crossOrigin-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die crossOrigin-Eigenschaft des HTMLImageElement-Interfaces ist ein String, der die Einstellung für Cross-Origin Resource Sharing (CORS) angibt, die beim Abrufen des Bildes verwendet wird. Sie spiegelt das crossorigin-Inhaltsattribut des <img>-Elements wider.

In diesem Artikel

Wert

Ein String, dessen Wert entweder anonymous oder use-credentials ist. Für die Bedeutungen siehe das HTML-Attributsreferenz crossorigin.

Beispiele

Das crossorigin-Attribut setzen

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

JavaScript

Der folgende Code demonstriert das Setzen der crossOrigin-Eigenschaft eines <img>-Elements, um CORS-Zugriff für das Abrufen eines neu erstellten Bildes zu konfigurieren.

js
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 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",
    "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%;
}

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

HTML DOM API
HTMLImageElement
Konstruktor
1. Image()
Instanzeigenschaften
Instanzmethoden
1. decode()
Vererbung
Verwandte Seiten für HTML DOM
Anleitungen
1. Verwenden von Microtasks in JavaScript mit queueMicrotask()
2. Im Detail: Microtasks und die JavaScript-Laufzeitumgebung

HTMLImageElement: crossOrigin-Eigenschaft

In diesem Artikel

Wert

Beispiele

Das crossorigin-Attribut setzen

JavaScript

HTML

CSS

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN