Bagaimana untuk membenarkan penggunaan merentas domain imej dan kanvas dalam HTML?-html tutorial-php.cn

Bagaimana untuk membenarkan penggunaan merentas domain imej dan kanvas dalam HTML?

王林

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

ke hadapan

723 orang telah melayarinya

Bagaimana untuk membenarkan penggunaan merentas domain imej dan kanvas dalam HTML?

Untuk membenarkan penggunaan merentas domain imej dan kanvas, pelayan mesti menyertakan pengepala CORS (Perkongsian Sumber Silang Asal) yang sesuai dalam respons HTTPnya. Pengepala ini boleh ditetapkan untuk membenarkan sumber atau kaedah tertentu, atau membenarkan mana-mana sumber mengakses sumber tersebut.

Kanvas HTML

Kanvas HTML5 ialah kawasan segi empat tepat pada halaman web yang dikawal oleh kod JavaScript Apa-apa sahaja boleh dilukis pada kanvas, termasuk imej, bentuk, teks dan animasi. grafik dan aplikasi web.

kaedah

Cara untuk membenarkan penggunaan merentas domain imej dan kanvas adalah dengan menambah perkara berikut pada pengepala −

Access-Control-Allow-Origin − *

Terjemahan bahasa Cina ialah:

Access Control Allowed Origin − *

Ini akan membolehkan semua elemen imej dan kanvas digunakan merentas asal.

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Di bawah ialah contoh kerja lengkap yang menunjukkan cara membenarkan penggunaan imej dan kanvas merentas domain. Untuk menjalankannya, cuma buka fail HTML dalam penyemak imbas web anda.

<!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="Bagaimana untuk membenarkan penggunaan merentas domain imej dan kanvas dalam 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="Bagaimana untuk membenarkan penggunaan merentas domain imej dan kanvas dalam 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>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk membenarkan penggunaan merentas domain imej dan kanvas dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!