admin管理员组

文章数量:1573069

现象：在使用canvas的toDataURL（）方法时，控制台有时会报错：Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

原因：这是由于之前由drawImage（）向canvas导入的图片跨域而导致的。

解决方法：

1、在引用图片之前打开跨域资源允许权限（一定要注意顺序）：

      const image = new Image()
      image.crossOrigin = "Anonymous";
      image.onload = () => {
        const base64Url = draw(image.width, image.height, image, image2, payload)
        callback && callback(base64Url);
      }
      image.src = payload.img + '?v=' + Math.random() // 处理缓存

2、存放图片地址的服务器也要开启跨域允许权限，不然会报错：No 'Access-Control-Allow-Origin' header is present on the requested resource.

     如Apache设置：

     ①.打开LoadModule headers_module modules/mod_headers.so

     ②.在虚拟主机<Directory></Directory>内加上 Header set Access-Control-Allow-Origin *

本文标签： 报错解决方法原因图片canvas

版权声明：本文标题：canvas生成图片toDataURL报错的原因和解决方法 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1725725525a1038905.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。