html2canvas 使用注意点

最近在搞一个截图的东西，遇到了一些问题，所以贴出代码，方便大家一次性解决开发中会遇到的问题。本篇文章解决了截图不完整，图片跨域，截图空白，截图带背景颜色（没有背景图片的代码），分辨率低，截图与实际元素位置偏差等问题

首先贴出 插件基础配置参数（请仔细阅读注释）

html2canvas 配置参数

插件二次封装，详细请看注释

插件部分

// 获取截图
export const getHtmlImage = async (options={}) => {
  let { canvasBox, canvasBoxOffsetLeft, canvasBoxOffsetTop, canvasBoxOffsetHeight } = options
  // 大概估算出，图片最大面积为maxPixels，超出只能舍弃一些分辨率，判断请转到scale配置
  const maxPixels = 880 * 3270 * 0.85;

  console.log('getHtmlImage 配置项=》》》》》》',options)
  return new Promise (async (resolve, reject) => {
    if (!canvasBox) {
      resolve(null)
      return
    }
    
    let domWidth = canvasBox.offsetWidth
    let domHeight = canvasBoxOffsetHeight || canvasBox.offsetHeight
    console.log(domWidth, domHeight)

    //定时为了解决页面太长，未加载出来时就截图，导致图片不完整
    setTimeout(() => {
      html2canvas(canvasBox, {
        // allowTaint: true, //是否允许跨域，会对canvas造成污染，导致无法使用canvas.toDataURL 方法
        useCORS: true, //是否允许跨域
        // proxy: 'https://test.test.com',
        backgroundColor: '#fff', //解决生成图片有白色背景方法，设置为null
        width: domWidth,
        height: domHeight,
        x: canvasBoxOffsetLeft || canvasBox.offsetLeft, 
        y: canvasBoxOffsetTop || canvasBox.offsetTop,
        // x: 397, 
        // y: 490,
        scale: maxPixels / (domWidth*domHeight) > 1 ? 1 : maxPixels / (domWidth*domHeight),
      }).then((canvas)=>{
        if(canvas){
          let dataUrl = canvas.toDataURL('image/png'); // image/png ， image/jpg
          console.log('dataUrl=>>>>>>>>',dataUrl)
          // let newImg = document.createElement("img");
          // // //newImg.style = "display:none;";    //如果要导出，这儿可以隐藏，然后用canvas2image搞定
          // newImg.src = dataUrl;
          // document.body.appendChild(newImg);
  
          resolve(dataUrl)
        }else{
          resolve(null)
        }
      });
    }, 500);
  })
  
}

普通直接截取某个元素，直接调用方法

// 截图模块
let canvasBox = this.document.querySelector('.canvasBox') || null
// await接收图片地址 
let url = await getHtmlImage({canvasBox})

解决截图元素是定位的，导致截图位置偏差，高度计算不准，截图空白的问题，position: fixed

// 截图模块
let canvasBox = this.document.querySelector('.canvasBox') || null
let scrollTop = document.documentElement.scrollTop
// 左侧计算方法， 元素距离屏幕左侧的距离
let canvasBoxOffsetLeft = canvasBox ? canvasBox.getBoundingClientRect().left : 0;
// 顶部计算方法， 元素距离顶部距离 + body滚动高度
let canvasBoxOffsetTop = canvasBox ? canvasBox.offsetTop + scrollTop : 0;

// await接收图片地址 
let url = await getHtmlImage({
  canvasBox,
  canvasBoxOffsetLeft,
  canvasBoxOffsetTop
})

如有写得错误/改进的地方，可回复评论