<p>レンダリングが完了する前にhtml2canvaspromiseが返されました</p>

作成日 2019年10月01日 · 3コメント · ソース: niklasvh/html2canvas

html2canvasの最新
古いバージョンはサポートされておらず、それらについて報告された問題はクローズされます。

最初に一般的なトラブルシューティング手順に従ってください。

[X]最新バージョンを使用しています
[X]縮小されていないバージョンのhtml2canvasを使用してテストし、コンソールで報告された潜在的な問題を確認しました

バグレポート：

いくつかのdivがあるページがあります。これらの各divには、いくつかのreact-table要素があります。各divのスクリーンショットを撮り、zipファイルを作成して、それらすべてを一度にダウンロードしたいと思います（一種の疑似パワーポイントスライドデッキとして）。これはMacで完全に機能しますが、WindowsでGoogle Chromeを使用している場合、スクリーンショットを撮ったときに、いくつかの反応テーブルを持つdivがレンダリングを完了していないようです。ロギングをオンにして、レンダリングが約1000ミリ秒で完了することを確認しましたが、html2canvasが返すcanvasは、レンダリングが完了していないように見えます。反応テーブルはレンダリングされますが、ページ上の残りのテキストは、読み込みが途中で終了したかのように、いくらか透明になります。

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