canvas跨域绘画图片

「爱情、让人受尽委屈。」 2023-01-17 02:24 206阅读 0赞

尽管不通过 CORS 就可以在 Canvas 画布中使用图片，但是这会污染画布。一旦画布被污染，你就无法读取其数据。例如，你不能再使用画布的 toBlob(), toDataURL() 或 getImageData() 方法，调用它们会抛出安全错误。这种机制可以避免未经许可拉取远程网站信息而导致的用户隐私泄露。

HTML 规范中图片有一个 crossorigin 属性，结合合适的 CORS 响应头，就可以实现在画布中使用跨域 <img> 元素的图像。

<table> 
 <thead> 
  <tr> 
   <th>crossOrigin/CORS</th> 
   <th>同域</th> 
   <th>跨域无 CORS</th> 
   <th>跨域有 CORS</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>default</td> 
   <td>支持</td> 
   <td>支持渲染，不支持&nbsp;<code>toDataURL</code></td> 
   <td>支持渲染，不支持&nbsp;<code>toDataURL</code></td> 
  </tr> 
  <tr> 
   <td>anonymous</td> 
   <td>N/A</td> 
   <td>同上</td> 
   <td>支持渲染，支持&nbsp;<code>toDataURL</code></td> 
  </tr> 
  <tr> 
   <td>use-credentials</td> 
   <td>N/A</td> 
   <td>同上</td> 
   <td>支持渲染，不支持&nbsp;<code>toDataURL</code></td> 
  </tr> 
 </tbody> 
</table>

总结：Canvas 可以正常的渲染跨域图片，但是在跨域图片没有设置跨域响应头或没有设置 crossOrigin = 'anonymous' 的时候，使用 canvas.toDataURl 会抛出如下错误：

Chrome

没有设置 crossOrigin

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
    at Image.img.onload...

跨域

Access to Image at 'http://localhost:3001/canvas.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

设置了 crossOrigin=use-credentials

Access to Image at 'http://localhost:3002/canvas.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:3000' is therefore not allowed access.

Safari/Firefox

没有设置 crossOrigin

SecurityError: The operation is insecure.

跨域

[Error] Origin http://192.168.3.99:3000 is not allowed by Access-Control-Allow-Origin.
    [Error] Failed to load resource: Origin http://192.168.3.99:3000 is not allowed by Access-Control-Allow-Origin. (canvas.jpg, line 0)
    [Error] Cross-origin image load denied by Cross-Origin Resource Sharing policy.

设置了 corssOrigin=use-credentials

[Error] Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.
    [Error] Failed to load resource: Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true. (canvas.jpg, line 0)
    [Error] Cross-origin image load denied by Cross-Origin Resource Sharing policy.

解决方案**crossOrigin**：  
给img标签加上**'crossOrigin'**属性即可解决图片跨域问题

图片路径：[http://img.hb.aicdn.com/38d8f519b3f464a80d85ed9632fed904ed0181f41d632-ZHrigO\_fw658][http_img.hb.aicdn.com_38d8f519b3f464a80d85ed9632fed904ed0181f41d632-ZHrigO_fw658]

// 加载图片
        loadImage(url, isCalc) {
          return new Promise((resolve, reject) => {
            const img = new Image();
            img.crossOrigin = "anonymous";
            img.onload = () => {
              console.log('图片测试url:',img);
              resolve(img);
            };
            img.onerror = () => resolve("");
            img.src = url;
    
            let that = this;
            
          });
        },

解决方案 ***：***通过 ***XMLHttpRequest  ***请求img  
**注意：需要后台 *header("Access-Control-Allow-Origin: \*");***

judgeUri(url) {
          let origin = window.location.origin;
          if (url.indexOf("http") > -1 && url.indexOf(origin) == -1) return true; // 跨域
          return false; // 同源
        },
    
        // 加载图片
        loadImage(url) {
          return new Promise((resolve) => {
            const img = new Image();
            img.crossOrigin = "anonymous"; // 允许跨域
            // 跨域处理
            if (this.judgeUri(url)) {
              // 需要服务器运行跨域 header("Access-Control-Allow-Origin: *");
              let xhr = new XMLHttpRequest();
              xhr.open("get", `${url}?_t=${new Date().getTime()}`, true);
              xhr.responseType = "blob";
              xhr.onreadystatechange = function () {
                if (
                  xhr.readyState === XMLHttpRequest.DONE &&
                  xhr.readyState == 4 &&
                  xhr.status == 200
                ) {
                  img.src = window.URL.createObjectURL(this.response);
                  img.onload = () => resolve(img);
                }
                if (xhr.status != 200) resolve("");
              };
              xhr.send();
            } else {
              img.src = url;
              img.onload = () => resolve(img);
            }
            img.onerror = (err) => resolve("");
          });
        },

[http_img.hb.aicdn.com_38d8f519b3f464a80d85ed9632fed904ed0181f41d632-ZHrigO_fw658]: http://img.hb.aicdn.com/38d8f519b3f464a80d85ed9632fed904ed0181f41d632-ZHrigO_fw658