<p>html2canvas 承诺在渲染完成之前返回</p>

创建于 2019-10-01 · 3评论 · 资料来源: niklasvh/html2canvas

请确保您正在使用最新版本的 html2canvas进行测试。
不支持旧版本，为它们报告的问题将被关闭。

请先按照一般故障排除步骤进行操作：

[X] 您使用的是最新版本
[X] 您正在使用非缩小版的 html2canvas 进行测试，并检查了控制台中报告的任何潜在问题

错误报告：

我有一个包含多个 div 的页面。这些 div 中的每一个都有几个react-table元素。我想截取每个 div 的屏幕截图，然后创建一个 zip 文件并一次下载所有这些文件（作为一种伪 powerpoint 幻灯片）。这在 Mac 上运行良好，但是当我在 Windows 上使用 Google Chrome 时，在截取屏幕截图时，带有多个反应表的 div 似乎没有完成渲染。我已经通过打开日志确认渲染在大约 1000 毫秒内完成，但是 html2canvas 返回的canvas看起来好像没有完成渲染。 react-tables 被渲染了，但是页面上的其余文本有点透明，好像它已经加载到一半了。

我还没有一个 jsfiddle 复制品，但我会努力在此处添加一个。

规格：

html2canvas 版本测试：
浏览器和版本：最新的 Chrome - 77.0.3865.90
操作系统：Windows（重要，无法在Mac上重现）

资料来源

tjchambers32

👍6

最有用的评论

我也遇到了这个问题，它在我们这边造成了一个非常糟糕的错误。想固定！

gregroyal 于 2019-11-12

👍5

所有3条评论

我已经能够让它工作，尽管它不是最佳的。

html2canvas(div, {
    letterRendering: true,
    onclone: (doc) => {
        // onclone logic to resize div

        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve()
            }, 400)
        })
    }
}).then((obj) => {
    let img = obj.toDataURL()
    // save image to zip file
})

我通过反复试验来到了 400ms 超时。更何况，当 html2canvas 截取屏幕截图时，我观察到 div 没有完全呈现的问题。

tjchambers32 于 2019-10-02

🚀2

我同意，我有一个非常相似的问题，即 Html2Canvas 生成的图像被截断了。这仅发生在生产版本中。在开发环境中它运行良好。上面的解决方法解决了我的问题。我同意这并不理想，并且需要对此进行适当的修复，但现在它解决了我的问题。感谢@tjchambers32的解决方法。

andre-engelbrecht 于 2019-10-24

👀1