首页 > 代码库 > canvas生成图片toDataURL报错的原因和解决方法
canvas生成图片toDataURL报错的原因和解决方法
现象:在使用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="http://www.mamicode.com/图片地址";
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报错的原因和解决方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。