Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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 Juli 2015.
DiecrossOrigin-Eigenschaft desHTMLImageElement-Interfaces ist ein String, der die Einstellung für Cross-Origin Resource Sharing (CORS) angibt, die beim Abrufen des Bildes verwendet wird. Sie spiegelt dascrossorigin-Inhaltsattribut des<img>-Elements wider.
Wert
Ein String, dessen Wert entwederanonymous oderuse-credentials ist. Für die Bedeutungen siehe das HTML-Attributsreferenzcrossorigin.
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 dercrossOrigin-Eigenschaft eines<img>-Elements, um 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("/shared-assets/images/examples/balloon.jpg");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
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%;}Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # dom-img-crossorigin |