html2canvas截图如何解决跨域的问题？?报错
1、问题描述
如果不跨域的话，截图正常。
如果有跨域的图片，那么js报错，报错信息如下：
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
2、代码
/**
* 截图
*/
function doScreenShot(){
html2canvas(document.body, {
onrendered: function(canvas) {
canvas.id = "mycanvas";
var image =canvas.toDataURL("image/png").replace("image/png","image/octet-stream");
window.location. // it will save locally
}
});
}
3、补充
看到官方（https://github.com/niklasvh/html2canvas）上面有介绍代理啥的，也没看明白怎么使用，好像还没有java方面的代理。有人能补充一下这方面的使用介绍么？
或者有其他的web页面截图方面的方法也可以介绍下，谢谢~
展开
收起
1
条回答
写回答
写回答
-
https://developer.aliyun.com/profile/5yerqm5bn5yqg?spm=a2c6h.12873639.0.0.6eae304abcjaIB关于图片跨域的问题本人在使用过程中也遇到了，开始使用代理服务器解决了，但是感觉不太好，
后来偶尔中，在 html2canvas源码中改了几段小代码终于把问题给解决了。
functionImageContainer(src,cors){this.src=src;this.image=newImage();varself=this;this.tainted=null;this.promise=newPromise(function(resolve,reject){self.image.onload=resolve;self.image.onerror=reject;if(cors){//self.image.crossOrigin="anonymous";//1.去掉此处的anonymous代码改为空self.image.crossOrigin="";}//self.image.src=src;//2.在源src后面添加一个随机数如时间戳+"?"+newDate().getTime();self.image.src=src+"?"+newDate().getTime();if(self.image.complete===true){resolve(self.image);}});}通过以上改造尼玛居然把问题给解决了，很奇怪，上面的代码改造过程缺一不可，不过我的问题是夸子域，还有个关键设置，
就是在调用时
html2canvas($("body"),{onrendered:function(canvas){//},useCORS:true});//这个地方只需要将useCORS设置成true，千万不要加allowTaint:true这两个不要同时加，我当时在看官网文档的时候，看到这两个参数都是解决跨域的，后来就两个都加上去了，发现两个加上去就会有问题，具体你可以查看源码，这里我就不做过多解释了
回复 @ledcf:https://share.weiyun.com/0d5c9cc7ac20076c1c389e2533b8f618主要就改了上面截图的那几个地方回复 @AK_诚:大神可以把修改的js发下吗？我的qq1609479901,拜托大神！谢谢帮大忙了，终于解决了html2canvas出来的canvas空白就是添加了useCORS参数解决的，谢谢目前也遇到同样的问题。
canvas调用toDataURL()时跨域的问题无法解决。
请问题主有没找到解决方法？
没有。2020-06-10 13:25:13赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
相关课程
更多
推荐问答
