Damit Bilder und Leinwände domänenübergreifend verwendet werden können, muss der Server die entsprechenden CORS-Header (Cross-Origin Resource Sharing) in seine HTTP-Antwort einbinden. Diese Header können so eingestellt werden, dass sie bestimmte Quellen oder Methoden zulassen oder dass jede Quelle auf die Ressource zugreifen kann.
Eine HTML5-Leinwand ist ein rechteckiger Bereich auf einer Webseite, der durch JavaScript-Code gesteuert wird. Auf der Leinwand kann alles gezeichnet werden, einschließlich Bildern, Formen, Text und Animationen. Die Leinwand ist ein großartiges Werkzeug zum Erstellen von Spielen, Grafiken usw Webanwendungen.
Um die domänenübergreifende Verwendung von Bildern und Leinwänden zu ermöglichen, fügen Sie der Kopfzeile Folgendes hinzu: −
Dadurch können alle Bild- und Leinwandelemente ursprungsübergreifend verwendet werden.
Die chinesische Übersetzung vonNachfolgend finden Sie ein vollständiges Arbeitsbeispiel, das zeigt, wie Sie die domänenübergreifende Verwendung von Bildern und Leinwänden ermöglichen. Um es auszuführen, öffnen Sie einfach die HTML-Datei in Ihrem Webbrowser.
<!DOCTYPE html>
<html>
<head>
<script>
function allowCrossOrigin(img, url) {
if (url.indexOf('https://') !== 0 && url.indexOf('http://') !== 0) {
// only allow cross-origin requests for images that are hosted on a secure
// (HTTPS/HTTP) server
return;
}
// create a new Image object and set its src property to the url of the image
// that we want to load
var image = new Image();
image.src = url;
// when the image has loaded, set the src property of the img element to the
// url of the image
image.onload = function() {
img.src = url;
};
}
</script>
</head>
<body>
<!-- define an img element and set its src property to a local image -->
<img id='local-image' src='https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png' style="max-width:90%" style="max-width:90%" alt="Wie erlaube ich die domänenübergreifende Nutzung von Bildern und Canvas in HTML?" >
<!-- define another img element and try to set its src property to
an image that is hosted on a different domain -->
<img id='remote-image' style="max-width:90%" style="max-width:90%" alt="Wie erlaube ich die domänenübergreifende Nutzung von Bildern und Canvas in HTML?" >
<script>
// get a reference to the img element with id="remote-image"
var remoteImage = document.getElementById('remote-image');
// set the src property of the img element to the url of the image that we want
// to load
remoteImage.src = 'https://i.natgeofe.com/n/2a832501-483e-422f-985c-0e93757b7d84/6_square.jpg';
// call the allowCrossOrigin function, passing in the img element and the url
// of the image that we want to load
allowCrossOrigin(remoteImage, 'https://i.natgeofe.com/n/2a832501-483e-422f-985c-0e93757b7d84/6_square.jpg');
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonWie erlaube ich die domänenübergreifende Nutzung von Bildern und Canvas in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
