canvas生成图片toDataURL报错的原因和解决方法

Posted 2020-09-25 破晓儿

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

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

解决方法：

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

1         var img=new Image;
2         img.crossOrigin="anonymous"; //关键4       
3         img.src="图片地址";

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 *