时间戳

首页 > 解决方案 > Chrome 版本 87 在创建快照时不支持 HTML2CANVAS 的函数 canvas.toDataURL("image/png")

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

问题描述

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。

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

下面是我用于此过程的代码片段。

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

标签： javascriptgoogle-chromehtml2canvas

解决方案

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

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

    }
});

推荐阅读