Baseline Widely available
Das HTMLImageElement-Interface verfügt über das Attribut crossOrigin, das als Zeichenkette die Cross-Origin Resource Sharing (CORS)-Einstellung angibt, die beim Abrufen des Bildes verwendet werden soll.
Eine Zeichenkette mit einem Schlüsselwort, 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 Abrufmodus no-cors).
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 Anmeldeinformationen gesendet werden, wenn das Bild von derselben Herkunft abgerufen wird, von der das Dokument geladen wurde.
use-credentials
Anfragen des HTMLImageElement verwenden den cors-Modus und den include credentials-Modus; alle Bildanfragen des Elements verwenden CORS, unabhängig davon, von welcher Domain der Abruf stammt.
Wenn crossOrigin eine leere Zeichenkette ("") ist, wird der anonymous-Modus ausgewählt.
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 Anmeldeinformationen werden für alle Cross-Origin-Ladevorgänge verwendet.
Der folgende Code zeigt das Setzen der crossOrigin-Eigenschaft auf einem <img>-Element zur Konfiguration des CORS-Zugriffs für den Abruf eines neu erstellten Bildes.
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");
<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>
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%;
}
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4