html2canvas - 项目中遇到的那些坑点汇总

/*图片跨域及截图模糊处理*/
      let shareContent = domObj,//需要截图的包裹的（原生的）DOM 对象
          width = shareContent.clientWidth,//shareContent.offsetWidth; //获取dom 宽度
          height = shareContent.clientHeight,//shareContent.offsetHeight; //获取dom 高度
          canvas = document.createElement("canvas"), //创建一个canvas节点
          scale = 2; //定义任意放大倍数 支持小数
      canvas.width = width * scale; //定义canvas 宽度 * 缩放
      canvas.height = height * scale; //定义canvas高度 *缩放
      canvas.style.width = shareContent.clientWidth * scale + "px";
      canvas.style.height = shareContent.clientHeight * scale + "px";
      canvas.getContext("2d").scale(scale, scale); //获取context,设置scale 
      let opts = {
          scale: scale, // 添加的scale 参数
          canvas: canvas, //自定义 canvas
          logging: false, //日志开关，便于查看html2canvas的内部执行流程
          width: width, //dom 原始宽度
          height: height,
          useCORS: true // 【重要】开启跨域配置
      };
html2canvas(shareContent,opts).then（）　

NodeContainer.prototype.TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;
NodeContainer.prototype.TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;

NodeContainer.prototype.TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+(?:\.\d+)?px){0,})/g;
NodeContainer.prototype.TEXT_SHADOW_VALUES = /(-?\d+(?:\.\d+)?px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;

// html2canvas正则匹配
'rgb(102, 102, 102) 11.924px 11.924px 0px'.match(/((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g); // ["rgb(102, 102, 102)"]
"rgb(102, 102, 102) 11.924px 11.924px 0px".match(/(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g); // ["rgb(102, 102, 102)", "924px", "924px", "0px"]

// 修改后的正则匹配
'rgb(102, 102, 102) 11.924px 11.924px 0px'.match(/((rgba|rgb)\([^\)]+\)(\s-?\d+(?:\.\d+)?px){0,})/g); // ["rgb(102, 102, 102) 11.924px 11.924px 0px"]
"rgb(102, 102, 102) 11.924px 11.924px 0px".match(/(-?\d+(?:\.\d+)?px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g); // ["rgb(102, 102, 102)", "11.924px", "11.924px", "0px"]

this.renderer.fontShadow(shadows[0].color, shadows[0].offsetX, shadows[0].offsetY, shadows[0].blur);

 this.setVariable("shadowColor", color.toString())
     .setVariable("shadowOffsetY", offsetX)
     .setVariable("shadowOffsetX", offsetY)
     .setVariable("shadowBlur", blur);

CanvasRenderer.prototype.fontShadow = function(color, offsetX, offsetY, blur) {
  this.ctx.shadowOffsetX = offsetX;
  this.ctx.shadowOffsetY = offsetY;
  this.ctx.shadowColor = color;
  this.ctx.shadowBlur = blur;
};

CanvasRenderer.prototype.clearShadow = function() {
    this.ctx.shadowOffsetX = 0;
    this.ctx.shadowOffsetY = 0;
    this.ctx.shadowBlur = 0;
};

this.renderer.font(container.parent.color('color'), container.parent.css('fontStyle'), container.parent.css('fontVariant'), weight, size, family);
    // if (shadows.length) {
    //     // TODO: support multiple text shadows
    //     this.renderer.fontShadow(shadows[0].color, shadows[0].offsetX, shadows[0].offsetY, shadows[0].blur);
    // } else {
    //     this.renderer.clearShadow();
    // }

    this.renderer.clip(container.parent.clip, function() {
        textList.map(this.parseTextBounds(container), this).forEach(function(bounds, index) {
            if (bounds) {
                if (shadows.length) {
                  this.renderer.fontShadow(shadows[0].color, shadows[0].offsetX, shadows[0].offsetY, shadows[0].blur);
                  this.renderer.text(textList[index], bounds.left, bounds.bottom);
                  this.renderer.clearShadow();
                  this.renderTextStroke(textList[index], container.parent, bounds, this.fontMetrics.getMetrics(family, size));
                  this.renderTextDecoration(container.parent, bounds, this.fontMetrics.getMetrics(family, size));
                } else {
                  this.renderer.text(textList[index], bounds.left, bounds.bottom);
                  this.renderTextStroke(textList[index], container.parent, bounds, this.fontMetrics.getMetrics(family, size));
                  this.renderTextDecoration(container.parent, bounds, this.fontMetrics.getMetrics(family, size));
                }
            }
        }, this);
    }, this);

import {html2img} from '../html2img' 
// 引入html2canvas封装代码:html2img
const oBtn1 = document.getElementById('btn1');
const  targetEleId1 = document.getElementById('targetEleId1');
const oBtn2 = document.getElementById('btn2');
const  targetEleId2 = document.getElementById('targetEleId2');
const oBtn3 = document.getElementById('btn3');
const  targetEleId3 = document.getElementById('targetEleId3');
oBtn1.onclick = function(){
  html2img({
    targetEleId: targetEleId1,
    imgType: 'jpg',
    titleStr: '自定义图片名称_当前时间戳'
  },false)
  .then((imgUrl)=>{
  // 拿到返回值：base64后的图片地址：imgUrl。执行其他逻辑
    var myImg = document.createElement('img');
    myImg.src=imgUrl;
    myImg.style.marginBottom=100+'px';
    myImg.style.marginLeft=10+'px';
    document.body.appendChild(myImg)
  })
};
oBtn2.onclick = function(){
  html2img({
    targetEleId: targetEleId2,
    imgType: 'jpg',
    titleStr: '自定义图片名称_当前时间戳'
  },false)
  .then((imgUrl)=>{
  // 拿到返回值：base64后的图片地址：imgUrl。执行其他逻辑
    var myImg = document.createElement('img');
    myImg.src=imgUrl;
    myImg.style.marginBottom=100+'px';
    myImg.style.marginLeft=10+'px';
    document.body.appendChild(myImg)
  })
};
oBtn3.onclick = function(){
  html2img({
    targetEleId: targetEleId3,
    imgType: 'jpg',
    titleStr: '自定义图片名称_当前时间戳'
  },false)
  .then((imgUrl)=>{
  // 拿到返回值：base64后的图片地址：imgUrl。执行其他逻辑
    var myImg = document.createElement('img');
    myImg.src=imgUrl;
    myImg.style.marginBottom=100+'px';
    myImg.style.marginLeft=10+'px';
    document.body.appendChild(myImg)
  })
};