html2canvas滚动截图

滚动截图

项目需求要进行动态的滚动截图搜索一下发现html2canvas可以实现截图，但是滚动截图网上搜罗了一遍发现不是很完善所以记录下

• 首先npm一下安装依赖: npm install html2canvas
• 再需要的页面引入: html2canvas from html2canvas
• 第三步使用: 直接贴代码

/**
 * @description 截图函数
 * @params {...Array} 1、DomObj: 需要进行截图的Dom节点; 2、fileName: 截图命名;3、ops: html2canvas配置项;4、计算的截图宽度;
 *
**/
downloadImg = (DomObj, fileName, ops = {}, width) => {
  return new Promise(resolve => {
    setTimeout(() => {
      // 复刻需要滚动截图的Dom, 要在改复制的Dom节点加滚动条, 否则会截图失败
      let copyDom = null;
      const copyOps = ops;
      // 检查宽度是否大于项目全屏宽度
      let copyWidth = null;
      let flag = false;
      if (width < 1803) {
        copyWidth = 1803;
        flag = false;
      } else {
        copyWidth = width;
        flag = true;
        copyDom = obj.cloneNode(true);
        copyDom.style.width = `${copyWidth + 50}px`;
        copyDom.style.height = `${obj.scrollHeight + 50}px`;
        // 设置配置项 1、scale: 浏览器缩放值；2、width: 图片宽度；3、height: 图片高度; 4、x(scrollLeft) || y(scrollTop): 滚动轴的起始位置
        copyOps.scale = window.devicePixelRatio;
        copyOps.width = copyWidth + 50;
        copyOps.height = obj.scrollHeight + 50;
        copyDom.x = obj.scrollLeft;
        // 设置ID为复刻Dom添加样式;
        copyDom.id = 'copyDom';
        // 将复刻元素插入HTML中
        document.querySelector('body').appendChild(copyDom);
      }
      html2canvas(flag ? copyDom : obj, copyOps).then(canvas => {
        const saveUrl = canvas.toDateURL('image/png');
        const aLink = document.createElement('a');
        aLink.href = saveUrl;
        aLink.download = fileName || '图片';
        aLink.click();
        if (flag) {
          //
          copyDom.parentNode.removeChild(copyDom);
        }
        aLink.parentNode.removeChild(aLink);
      })
      resolve('success');
    }, 1)
  })
}

• 最后成功：如下图
  
  

Remark: 要注意的点有二

• 一是哪个Dom节点要滚动截图就在该Dom节点加滚动条
• 二是配置项设置滚动条初始位值