首页 > Web开发 > 详细

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

时间:2017-06-27 16:03:26      阅读:495      评论:0      收藏:0      [点我收藏+]

现象:在使用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 *
  

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

原文:http://www.cnblogs.com/sunala/p/7085525.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!