美文网首页
关于html2canvas 绘制图片跨域问题

关于html2canvas 绘制图片跨域问题

作者: 我讲你思 | 来源:发表于2019-02-19 17:19 被阅读0次

    运行环境:微信,html2canvas版本:1.0.0-alpha.12
    页面核心代码:
    生成图片的代码:

    function createImg() {
          let content_html = document.getElementById('downCavas'); //要转化的div
          let width = content_html.offsetWidth;
          let height = content_html.offsetHeight;
          let offsetTop = content_html.offsetTop;
          let canvas = document.createElement("canvas");
          let context = canvas.getContext('2d');
          let scaleBy = Math.ceil(window.devicePixelRatio);
          canvas.width = width*scaleBy;
          canvas.height = (height+offsetTop)*scaleBy;
          context.scale(scaleBy,scaleBy);
          var opts = {
            useCORS: true,//允许加载跨域的图片
            tainttest:true, //检测每张图片都已经加载完成
            scale:scaleBy, // 添加的scale 参数
            canvas:canvas, //自定义 canvas
            logging: false, //日志开关,发布的时候记得改成false
            width:width, //dom 原始宽度
            height:height //dom 原始高度
          };
          html2canvas(content_html,opts).then(function (canvas) {
            canvas.style.width = width+"px";
            canvas.style.height = height+"px";
            const imgUrl = canvas.toDataURL("image/png")
            var oImgBox = document.createElement("img");
            oImgBox.setAttribute("src", imgUrl);
            oImgBox.setAttribute("class", "save-canvas-img");
            $('.save-el').append(oImgBox)
          });
        }
    

    html2canvas源码中修改:


    image.png

    相关文章

      网友评论

          本文标题:关于html2canvas 绘制图片跨域问题

          本文链接:https://www.haomeiwen.com/subject/xvufyqtx.html