如何在HTML中允許跨域使用影像和畫布？-html教學-PHP中文網

如何在HTML中允許跨域使用影像和畫布？

王林

發布： 2023-08-30 16:25:06

轉載

723 人瀏覽過

如何在HTML中允許跨域使用影像和畫布？

為了允許跨網域使用影像和畫布，伺服器必須在其HTTP回應中包含適當的CORS（跨網域資源共用）頭。這些頭可以設定為允許特定的來源或方法，或允許任何來源存取資源。

HTML Canvas

An HTML5 Canvas is a rectangular area on a web page that is controlled by JavaScript code. Anything can be drawn on the canvas, including images, shapes, text, and animations. The canvas is a great tool for shapes, text, and animations. The canvas is a great tool for shaating , and web applications.

方法

允許跨網域使用圖像和畫布的方法是將以下內容新增至標頭中−

Access-Control-Allow-Origin − *

的中文翻譯為：

存取控制允許來源 − *

這將允許所有的圖像和畫布元素在跨來源時使用。

Example

的中文翻譯為：

範例

下面是一個完整的工作範例，示範如何允許跨域使用圖像和畫布。要運行它，只需在網頁瀏覽器中開啟HTML檔案。

<!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="如何在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="如何在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>

登入後複製

以上是如何在HTML中允許跨域使用影像和畫布？的詳細內容。更多資訊請關注PHP中文網其他相關文章！