关于html2canvas 绘制图片跨域问题

运行环境:微信,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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,770评论 1 45
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,148评论 1 32
  • 常有闺蜜好友向我诉说心中的叹惋:为啥那些男的怎么就那么不懂人的心思呢? 一闺蜜受过高等教育,面容姣好、温柔贤惠、知...
    采葭小妖阅读 230评论 0 6
  • 常用方法: [User objectWithKeyValues:dict] 将字典转为数组 在模型内部实现+ (...
    一只不断前进的小蜗牛阅读 235评论 0 0
  • 难得一见的阳光明朗,遇见繁华未落的璀璨斑斓…… 包里装的《简爱》,随手拿出来翻阅,在公园的长椅上盘腿而坐,逐字逐句...
    凤凰澄明阅读 219评论 0 2