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

Question

HTML2Canvas与Chrome 87.xxxx版本的兼容性问题。我在js项目中使用HTML2Canvas将HTML转换为PDF。它与Chrome 86.0.xxxx版本完美配合。我注意到的问题是，在最新版本的Chrome(87.0.4280.88(和Opera(72.0.3815.400版本(中使用snapShotURL=canvas.toDataURL("image/png"(制作快照并使用此快照生成pdf时，画布上的渲染文本部分出现。无法通过包装显示完整的输入文本行。因此，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库(html2canvas1.0.0-rc.7https://html2canvas.hertzen.com)它奏效了。注意：最新的库不支持html2canvas((。然后(function(canvas(｛｝(尝试使用

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

Answer 2

html2canvas上的当前版本1.3.2显示了的用法

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