1

html2canvas( http://html2canvas.hertzen.com )を使用して、Google マップ ビューを含むページのスクリーンショットを撮ろうとしていますが、結果のスクリーンショットがマーカーを除いて白くなるという問題が発生しています。この問題を (おそらく) 複雑にしているのは、React アプリケーションを作成しようとしているということです。

このコードを使用してスクリーンショットを撮ります。

takeScreenshot = () => {
    let googleMapsView = document.querySelector('.google-map');

    html2canvas(googleMapsView).then((canvas) => {
        let imgData = canvas.toDataURL('image/png');
        console.log(imgData);
    });
}

これは、スクリーンショットを撮ろうとしているページです。 スクリーンショットへのページ

上記のコードは、次の画像を生成します。

結果のスクリーンショット

ご覧のとおり、スクリーンショットが生成され、マーカーと下部の「Map Data ©2018 Google」がキャプチャされますが、結果のスクリーンショットは空白のままです。

Github のドキュメントには、ここにプリロードするオプションがあります: https://github.com/niklasvh/html2canvas/wiki/Documentation#preload-content

0.5.0 betaただし、これはバージョン以降ライブラリから削除されたようです-現在は1.0.0 alphaにあるため、そのような古いライブラリに戻ることは実際にはオプションではありません.

スクリーンショットを撮る前に、GMaps コンポーネントがレンダリングされるのを待つように html2canvas に指示するにはどうすればよいですか?

4

2 に答える 2