• html2canvas截图问题,图片跨域导致截图空白


    年前的一个项目,要做一个H5截屏分享的功能,使用的是html2canvas插件,截图功能是实现了,但是跨域的图片死活不出来,

     经过几天谷歌百度和不断的尝试,终于找到解决办法了,一共经历了让人心力憔悴的两个坑:

    小坑:

      跨域的logo和分享的二维码都出不来,

    1、需要在服务器IIS上的HTTP响应标头设置,最简单粗暴的方法就是全部设置成*,不过这样安全性也低,自己可以根据自己需求设置:

    access-control-allow-credentials:true
    Access-Control-Allow-Headers:*
    access-control-allow-origin:*

    2、在html2canvas添加参数useCORS设置:

    html2canvas(document.getElementsByClassName('codediv')[0], {
                    useCORS: true,
                    allowTaint: false
                }).then(function (canvas) {

              var url = canvas.toDataURL("image/png");
              var oA = document.createElement("a");
              oA.download = '测试截图';// 设置下载的文件名,默认是'下载'
              oA.href = url;
              document.body.appendChild(oA);
              oA.click();
              oA.remove(); // 下载之后把创建的元素删除

                });

    大坑:二维码显示了,logo时而显示时而不显示,绞尽脑汁:

    解决方法:

    1、需先将以上两步设置好

    2、在img标签上设置 crossorigin="anonymous" 属性;

     3、需要在img的src后加上参数(我就是一直卡在这,一直不能解决):

  • 相关阅读:
    Java常见的10个异常
    HashMap 和 Hashtable 的 6 个区别
    JSP随记
    Java> ArrayList的扩容因子为什么是1.5?
    Java> 有趣的byte及位运算
    前导0计数Integer.numberOfLeadingZeros,后缀0计数Integer.numberOfTailingzeros
    结构型模式
    结构型模式
    结构型模式
    结构型模式
  • 原文地址:https://www.cnblogs.com/hhuiii/p/12294540.html
Copyright © 2020-2023  润新知