创建快照时，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)
});