HTML 如何允许跨源使用图像和画布

要允许跨源使用图像和画布，服务器必须在其HTTP响应中包括适当的CORS（跨源资源共享）标头。这些标头可以被设置为允许特定的来源或方法，或者允许任何来源访问资源。

HTML画布

HTML5画布是网页上的一个矩形区域，由JavaScript代码控制。任何东西都可以在画布上绘制，包括图像、形状、文本和动画。画布是创建游戏、图形和网络应用的绝佳工具。

办法

允许跨源使用图像和画布的方法是在标题中添加以下内容 –

Access-Control-Allow-Origin – *

这将允许所有的图像和画布元素被跨源使用。

例子

下面是一个完整的例子，说明如何允许跨源地使用图像和画布。要运行它，只需在网页浏览器中打开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' width='200' height='200'>
      <!-- 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' width='200' height='200'>
      <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>