html2canvas 使用注意點

最近在搞一個截圖的東西，遇到了一些問題奸鬓，所以貼出代碼焙畔，方便大家一次性解決開發(fā)中會遇到的問題。本篇文章解決了截圖不完整串远，圖片跨域宏多，截圖空白，截圖帶背景顏色（沒有背景圖片的代碼）澡罚，分辨率低伸但，截圖與實際元素位置偏差等問題

首先貼出 插件基礎(chǔ)配置參數(shù)（請仔細(xì)閱讀注釋）

html2canvas 配置參數(shù)

插件二次封裝，詳細(xì)請看注釋

插件部分

// 獲取截圖
export const getHtmlImage = async (options={}) => {
  let { canvasBox, canvasBoxOffsetLeft, canvasBoxOffsetTop, canvasBoxOffsetHeight } = options
  // 大概估算出档叔，圖片最大面積為maxPixels桌粉，超出只能舍棄一些分辨率，判斷請轉(zhuǎn)到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)

    //定時為了解決頁面太長衙四，未加載出來時就截圖铃肯，導(dǎo)致圖片不完整
    setTimeout(() => {
      html2canvas(canvasBox, {
        // allowTaint: true, //是否允許跨域，會對canvas造成污染传蹈，導(dǎo)致無法使用canvas.toDataURL 方法
        useCORS: true, //是否允許跨域
        // proxy: 'https://test.test.com',
        backgroundColor: '#fff', //解決生成圖片有白色背景方法押逼，設(shè)置為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;";    //如果要導(dǎo)出惦界，這兒可以隱藏挑格，然后用canvas2image搞定
          // newImg.src = dataUrl;
          // document.body.appendChild(newImg);
  
          resolve(dataUrl)
        }else{
          resolve(null)
        }
      });
    }, 500);
  })
  
}

普通直接截取某個元素，直接調(diào)用方法

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

解決截圖元素是定位的沾歪，導(dǎo)致截圖位置偏差漂彤，高度計算不準(zhǔn)，截圖空白的問題灾搏，position: fixed

// 截圖模塊
let canvasBox = this.document.querySelector('.canvasBox') || null
let scrollTop = document.documentElement.scrollTop
// 左側(cè)計算方法挫望， 元素距離屏幕左側(cè)的距離
let canvasBoxOffsetLeft = canvasBox ? canvasBox.getBoundingClientRect().left : 0;
// 頂部計算方法， 元素距離頂部距離 + body滾動高度
let canvasBoxOffsetTop = canvasBox ? canvasBox.offsetTop + scrollTop : 0;

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

如有寫得錯誤/改進(jìn)的地方确镊，可回復(fù)評論