Comment autoriser l'utilisation inter-domaines des images et du canevas en HTML ?-tutoriel HTML-php.cn

Comment autoriser l'utilisation inter-domaines des images et du canevas en HTML ?

王林

Libérer： 2023-08-30 16:25:06

avant

722 Les gens l'ont consulté

Comment autoriser lutilisation inter-domaines des images et du canevas en HTML ?

Pour permettre l'utilisation d'images et de toiles sur plusieurs domaines, le serveur doit inclure les en-têtes CORS (Cross-Origin Resource Sharing) appropriés dans sa réponse HTTP. Ces en-têtes peuvent être définis pour autoriser des sources ou méthodes spécifiques, ou pour permettre à n'importe quelle source d'accéder à la ressource.

Toile HTML

Un canevas HTML5 est une zone rectangulaire sur une page Web contrôlée par du code JavaScript. Tout peut être dessiné sur le canevas, y compris des images, des formes, du texte et des animations. Le canevas est un excellent outil pour créer des jeux, des graphiques et des animations. applications Web.

Méthode

La façon d'autoriser l'utilisation d'images et de toiles dans tous les domaines est d'ajouter ce qui suit à l'en-tête −

Access-Control-Allow-Origin − *

La traduction chinoise est :

Access Control Allowed Origin − *

Cela permettra à tous les éléments d’image et de canevas d’être utilisés à travers les origines.

La traduction chinoise de

Exemple

est :

Exemple

Vous trouverez ci-dessous un exemple de travail complet démontrant comment autoriser l'utilisation d'images et de toiles dans tous les domaines. Pour l'exécuter, ouvrez simplement le fichier HTML dans votre navigateur Web.

<!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="Comment autoriser l'utilisation inter-domaines des images et du canevas en 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="Comment autoriser l'utilisation inter-domaines des images et du canevas en 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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!