Wie erlaube ich die domänenübergreifende Nutzung von Bildern und Canvas in HTML?-HTML-Tutorial-php.cn

Wie erlaube ich die domänenübergreifende Nutzung von Bildern und Canvas in HTML?

王林

Freigeben： 2023-08-30 16:25:06

nach vorne

706 Leute haben es durchsucht

Wie erlaube ich die domänenübergreifende Nutzung von Bildern und Canvas in HTML?

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.

HTML-Leinwand

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.

Methode

Um die domänenübergreifende Verwendung von Bildern und Leinwänden zu ermöglichen, fügen Sie der Kopfzeile Folgendes hinzu: −

Access-Control-Allow-Origin − *

Die chinesische Übersetzung lautet:

Access Control Allowed Origin − *

Dadurch können alle Bild- und Leinwandelemente ursprungsübergreifend verwendet werden.

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

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

Nach dem Login kopieren

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!