創建快照時，Chrome 版本 87 不支持 HTML2CANVAS 的 function canvas.toDataURL("image/png")

Question

HTML2Canvas 與 Chrome 版本 87.xxxx 的兼容性問題。 我在我的 js 項目中使用 HTML2Canvas 將 HTML 轉換為 PDF。 它與 Chrome 版本 86.0.xxxx 完美配合。 The issue I noticed is, the rendered text on the canvas partially appeared when making snapshot using snapShotURL = canvas.toDataURL("image/png") and generating pdf with this snapshot in latest version of Chrome (87.0.4280.88) and Opera (version 72.0.3815.400。）。 無法通過包裝顯示完整的輸入文本行。 因此 HTML 的輸入字段（文本框）中的值不會反映到生成的 PDF 中。 輸入文本的長行必須換行，並且應該在生成的 pdf 中出現整行文本。

我正在使用最新的 html2canvas.js，測試版本為：1.0.0-rc.7。

非常感謝任何快速的建議/支持。

下面是我用於此過程的代碼片段。

    var totalTime = getTotalTimeSpent();
    sessionStorage.setItem("bsView","H");
html2canvas(document.querySelector("#pageWrap")).then(canvas => {
            snapShotURL = canvas.toDataURL("image/png"); //get's image string
            sessionStorage.setItem("snapShotURLS", snapShotURL);  
});

Answer 1

我遇到了類似的問題，但在反復嘗試后找不到任何相關的東西，我終於解決了這個問題。 我升級到最新的 html2canvas 庫（html2canvas 1.0.0-rc.7 https://html2canvas.hertzen.com ）並且它工作。 注意：最新的庫不支持 html2canvas().then(function(canvas) {}) 嘗試使用

html2canvas($("#pageWrap")[0], {
    onrendered: function (canvas) {

    }
});

Answer 2

html2canvas上的當前版本 1.3.2 顯示了以下用法：

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});