あすたぴ.dev

html2canvasでスクロールするとうまくキャプチャできない問題への対応

html2canvas
2019/12/15 05:04:18

※記事執筆時点のhtml2canvasのversionは v1.0.0-rc.5 です。

html2cnavas で縦にスクロールが発生する画面をキャプチャするとスクロールに合わせてキャプチャ結果がずれることがあります。

この問題に対してgithubではイシューがたっておりコメントの中にいくつかの解決策があります。

該当のイシューはこちら
https://github.com/niklasvh/html2canvas/issues/1878

対応方法その1

scrollX, scrollY を指定する

html2canvas(element, {
    scrollX: 0,
    scrollY: -window.scrollY
})

私の環境ではこの方法を試してみましたがうまくいきませんでした。

1.0.0-alpha.12にダウングレードする

使用するversionを 1.0.0-alpha.12. までダウングレードします。

私の環境ではこれでうまくいきました。canvas化しようとしているhtmlがこのバージョンでも可能であればこの方法がよさそうでしうた。

スクロール位置を調整してから実行する

window.scrollTo(0, 0);
html2canvas(element);

html2canvasを実行する前に、window.scrollで一番上までスクロールするという手法です。
最新版ではデフォルトでこれが組み込まれているという噂です。

スクロールしない

上記3つの解を見つけるまでに自分がとった方法はスクロールしないページを別途作ってそこでcanvas -> 画像化しました。

まとめ

イシューの最後にも書かれていますが、ダウングレードすることで解決する場合があるということは以前はできていた挙動、ということになります。
つまり今後もversionupすることで起き得るのでe2eテストしないとやな・・・って言ってますね・・。

Copyright © astapi