實現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節點加滾動條
• 二是配置項設置滾動條初始位值