html2canvas詳解

一、html2canvas生成圖片空白

html2canvas是一個用於將html頁面轉換為Canvas對象的js插件，使用簡單，可以用於在前端製作高清的圖片、PDF文件等，但在使用過程中，一些人會遇到空白的問題。以下是可能的解決方案：

1、使用空div包住頁面中需要保存的內容

<div id="capture">
    <!-- 需要保存的內容 -->
</div>

html2canvas(document.querySelector("#capture")).then(canvas => {
    // do something with canvas
});

2、手動設置元素的寬度和高度

html2canvas(element, {
    width: element.offsetWidth,
    height: element.offsetHeight
}).then(canvas => {
    // do something with canvas
});

3、處理每個節點前的延遲載入動畫效果

html2canvas(document.body, {
    allowTaint: true,
    useCORS: true,
    async: false,
    width: document.documentElement.offsetWidth,
    height: document.documentElement.offsetHeight
}).then(canvas => {
    // do something with canvas
});

二、html2canvas轉為pdf

將html2canvas生成的Canvas對象轉為PDF，可以用jsPDF庫，它可以生成包含文字、表格、圖像等內容的PDF文檔。

html2canvas(document.body).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF();
    pdf.addImage(imgData, 'PNG', 0, 0);
    pdf.save('download.pdf');
});

三、html2canvas坑

html2canvas本身存在一些問題，在使用過程中需要小心。

1、html2canvas無法渲染視頻和iframe

html2canvas無法渲染video標籤和iframe內的內容，因為它們的內容不在DOM中。如果需要保存video標籤的內容可以使用Whammy.js庫。

2、html2canvas可能會出現跨域問題

當資源來自不同的域名或協議時，html2canvas可能會出現跨域問題。可以在調用html2canvas時加上useCORS: true參數。

3、html2canvas可能會出現生成圖像大小不一致問題

如果在使用過程中發現生成的圖像大小與預期不一致，需要手動設置所有涉及的元素的寬度和高度。

四、html2canvas options

html2canvas提供了很多配置選項，可以靈活地定製生成效果。

1、scale：調整生成的圖像的縮放比例

html2canvas(document.body, {
    scale: 2
}).then(canvas => {
    // do something with canvas
});

2、backgroundColor：調整生成的圖像的背景色

html2canvas(document.body, {
    backgroundColor: '#FFFFFF'
}).then(canvas => {
    // do something with canvas
});

3、proxy：配置代理伺服器，用於解決跨域問題

html2canvas(document.body, {
    proxy: 'https://proxy-server.com/proxy'
}).then(canvas => {
    // do something with canvas
});

4、logging：開啟日誌記錄

html2canvas(document.body, {
    logging: true
}).then(canvas => {
    // do something with canvas
});

五、html2canvas 參數 class選取

html2canvas的class參數用於選擇需要截圖的元素，同CSS選擇器一樣，可以選擇類、ID、屬性等。

1、選擇類：’.className’

html2canvas(document.querySelector('.post')).then(canvas => {
    // do something with canvas
});

2、選擇ID：’#elementId’

html2canvas(document.querySelector('#myElement')).then(canvas => {
    // do something with canvas
});

3、選擇屬性：'[data-attribute=value]’

html2canvas(document.querySelector('[data-name="John"]')).then(canvas => {
    // do something with canvas
});

html2canvas可以很方便地用於前端製作圖片、PDF等。但在使用過程中需要注意一些坑，並注意參數的靈活使用。