html to canvas使用踩坑记录

import html2canvas from "html2canvas";

export const htmltocanvas = (id) => {
  var canvas = document.createElement("canvas");
  canvas.width = document.getElementById(id).clientWidth;
  canvas.height = document.getElementById(id).clientHeight;
  return new Promise((resolve, reject) => {
    html2canvas(document.getElementById(id), {
      canvas: canvas,
      scale: 2, //图片模糊可以先放大
      useCORS: true,
    }).then((canvas) => {
      var context = canvas.getContext("2d");
      context.mozImageSmoothingEnabled = false;
      context.webkitImageSmoothingEnabled = false;
      context.msImageSmoothingEnabled = false;
      context.imageSmoothingEnabled = false;   //开启防锯齿
      resolve(canvas.toDataURL("image/jpeg")); //jpeg格式更兼容,避免部分机型图片不显示

    });

    
  });
};

<img crossOrigin="anonymous" :src="imgUrl" alt="" />

 问题1:部分机型不适配高版本的 "html2canvas"会出现文字消失的情况

方案:使用 "^1.0.0-rc.4"版本 

问题2:出现生成的图片消失的情况

原因:未知

方案:

img.onload = () => {
      document.body.appendChild(img);
    };
    img.src = imgurl.value;
    img.style.display = "block";
    img.style.width = "8.93rem";
    img.style.margin = "1.35rem auto";
    img.style.borderRadius = "0.3rem";
    img.style.boxShadow = "0 0.09rem 0.75rem 0 #c8c8c8ff";
}

问题3:应该绘制到canvas上的图片消失

原因:可能是图片加载慢于canvas转换

方案:使用settimeout,时间为0的宏任务执行htm2canvas

问题4:动态生成二维码为空白

原因:生成二维码需要时间

方案:二次封装生成二维码的函数,使之异步,await生成二维码之后,再使用nexttick或者settimeout调用html2canvas

export const createQrcodeFn = (link, id) => {
  //清空上一个二维码
  document.getElementById(id).innerHTML = "";
  const result = new QRCode(document.getElementById(id), {
    text: link,
    width: 400,
    height: 400,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H,
  });

  return new Promise((resolve, reject) => {
    resolve(result);
  });
};

问题5:生成图片有白边

原因:可能有元素或滚动条占位,绘制图片之前滚动页面也会导致有白边,需要绘制的元素最好不要写在dialog等自带margin等属性的元素内

方案:

window.scrollTo(0, 0);
//或添加// x: document.getElementById(id).getBoundingClientRect().left, // 绘制的dom元素相对于视口的位置

body {
  overflow-y: overlay;
}