关于html2canvas 绘制图片跨域问题

2019-02-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
上一篇下一篇

猜你喜欢

热点阅读