html2canvas截圖空白問題分析

一、需要注意的細節

1、html2canvas截圖需要在當前網頁下進行，如果圖片資源需要跨域，可能會導致失敗。為了解決這個問題，可以使用CORS。

//設置跨域
html2canvas(document.querySelector("#target-element"), {
   useCORS: true
});

2、如果需要截圖的元素有fixed定位，可能會出現截圖不準確的情況。解決方法是，將這些fixed元素從文檔流中移除。

//獲取fixed元素，並從文檔流中移除
const fixedElements = document.querySelectorAll("body > *:not(script):not(style):not(link)");
fixedElements.forEach(elem => {
   if (getComputedStyle(elem).position === 'fixed') {
      elem.parentNode.removeChild(elem);
   }
});

3、html2canvas默認只截圖可見區域，如果需要截圖整個頁面，需要設置window的scrollX和scrollY。

//設置截圖整個頁面
html2canvas(document.documentElement, {
   scrollX: 0,
   scrollY: -window.scrollY,
});

二、遇到空白的情況

1、圖片加載未完成

如果頁面中的圖片未能加載完成，截圖時也會出現空白的問題。為了避免這種情況，可以使用window.onload事件，等待頁面所有資源加載完成之後再截圖。

//等待頁面加載完成再截圖
window.onload = function() {
   html2canvas(document.body).then(function(canvas) {
      document.body.appendChild(canvas);
   });
}

2、元素尺寸為0

如果需要截圖的元素尺寸為0，也會導致截圖空白。解決方法是檢查元素的具體樣式，包括width、height、padding、border等，確保元素有足夠的尺寸可供截圖。

3、使用了CSS3動畫效果

如果元素使用了CSS3動畫效果，截圖時也會出現問題。解決方法是等待動畫結束再進行截圖。

//等待動畫結束再截圖
const elem = document.querySelector('#target-element');
elem.classList.add('animated');
elem.addEventListener('animationend', function() {
   html2canvas(elem).then(function(canvas) {
      document.body.appendChild(canvas);
   });
});

三、截圖預覽與下載

對於截圖的存儲，可以使用canvas.toDataURL()將截圖轉化為base64格式的圖片數據，然後展示在頁面上或者提供下載鏈接。

//截圖並預覽或下載
html2canvas(document.body).then(function(canvas) {
   const previewImg = new Image();
   previewImg.src = canvas.toDataURL();
   document.body.appendChild(previewImg);
   
   const downloadLink = document.createElement('a');
   downloadLink.href = canvas.toDataURL();
   downloadLink.download = "my-screenshot.png";
   downloadLink.appendChild(document.createTextNode("下載截圖"));
   document.body.appendChild(downloadLink);
});

四、兼容性問題

html2canvas在一些低版本瀏覽器中可能存在兼容性問題，需要注意。同時，在某些特定的網站或應用中，可能會因為各種諸如DOM結構變化、CSS屬性變化、動態元素加載等的原因，而導致html2canvas無法正常截圖，需要根據具體情況進行調整和優化。