html2canvas截图问题,图片跨域导致截图空白
html2canvas截图问题，图⽚跨域导致截图空⽩
年前的⼀个项⽬，要做⼀个H5截屏分享的功能，使⽤的是html2canvas插件，截图功能是实现了，但是跨域的图⽚死活不出来，
截屏经过⼏天⾕歌百度和不断的尝试，终于到解决办法了，⼀共经历了让⼈⼼⼒憔悴的两个坑：
⼩坑：
  跨域的logo和分享的⼆维码都出不来，
1、需要在服务器IIS上的HTTP响应标头设置，最简单粗暴的⽅法就是全部设置成*，不过这样安全性也低，⾃⼰可以根据⾃⼰需求设置：access-control-allow-credentials:true
Access-Control-Allow-Headers:*
access-control-allow-origin:*
2、在html2canvas添加参数useCORS设置：
ElementsByClassName('codediv')[0], {
useCORS: true,
allowTaint: false
}).then(function (canvas) {
          var url = DataURL("image/png");
          var oA = ateElement("a");
          oA.download = '测试截图';// 设置下载的⽂件名，默认是'下载'
          oA.href = url;
          document.body.appendChild(oA);
          oA.click();
          oA.remove(); // 下载之后把创建的元素删除
});
⼤坑：⼆维码显⽰了，logo时⽽显⽰时⽽不显⽰，绞尽脑汁：
解决⽅法：
1、需先将以上两步设置好
2、在img标签上设置 crossorigin="anonymous" 属性；
3、需要在img的src后加上参数(我就是⼀直卡在这，⼀直不能解决)：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。