Chrome 版本 87 在创建快照时不支持 HTML2CANVAS 的函数 canvas.toDataURL("image/png")答案

【问题标题】：Chrome version 87 not supporting function canvas.toDataURL("image/png") of HTML2CANVAS when creating snapshotChrome 版本 87 在创建快照时不支持 HTML2CANVAS 的函数 canvas.toDataURL("image/png")
【发布时间】：2023-04-05 10:11:01
【问题描述】：

HTML2Canvas 与 Chrome 版本 87.xxxx 的兼容性问题。我在我的 js 项目中使用 HTML2Canvas 将 HTML 转换为 PDF。它与 Chrome 版本 86.0.xxxx 完美配合。我注意到的问题是，在使用 snapShotURL = canvas.toDataURL("image/png") 制作快照并在最新版本的 Chrome (87.0.4280.88) 和 Opera (version 72.0.3815.400。）。无法通过包装显示完整的输入文本行。因此，HTML 中输入字段（文本框）中的值不会反映到生成的 PDF 中。输入文本的长行必须被换行，并且应该出现在生成的 pdf 中的整行文本。

我正在使用最新的 html2canvas.js，测试版本为：1.0.0-rc.7。

非常感谢任何快速的建议/支持。

下面是我在这个过程中使用的代码 sn-p。

    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);  
});

【问题讨论】：

标签： javascript google-chrome html2canvas

【解决方案1】：

我遇到了类似的问题，但在反复尝试后找不到任何相关的东西，我终于解决了这个问题。我升级到最新的 html2canvas 库（html2canvas 1.0.0-rc.7 https://html2canvas.hertzen.com）并且它工作正常。注意：最新的库不支持 html2canvas().then(function(canvas) {}) 尝试使用

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

    }
});

【讨论】：

非常感谢 Hamza。
非常感谢哈姆扎。使用最新的 html2canvas 1.0.0-rc.7 输入的文本行部分出现在 pdf 中，对于长文本行无法换行。使用 snapShotURL = canvas.toDataURL("image/png") 制作快照时，画布上呈现的文本部分出现。有什么线索吗？？再次感谢您。

【解决方案2】：

html2canvas 的当前版本 1.3.2 显示了以下用途：

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

【讨论】：