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.
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.
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.
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 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
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 |