Html2canvas: javascriptを使用してグーグルマップのスクリーンショットを撮る

corsヘッダーが提供されていない限り、異なるオリジンの下にある画像（この場合はGoogleマップタイル）をレンダリングすることはできません。 これを克服する1つの方法は、イメージのプロキシを使用することです。

私はphpプロキシサーバーで試しましたが、エラーに直面しています：「キャッチされていません
SecurityError：「HTMLCanvasElement」で「toDataURL」を実行できませんでした：
汚れたキャンバスはエクスポートできません。」

私はこのプロキシサーバーを試しました：
https://github.com/brcontainer/html2canvas-php-proxy 、
上記のプロキシサーバーで、私はグーグルマップの方向を使用しました：
https://developers.google.com/maps/documentation/javascript/examples/directions-simple

2014年12月13日土曜日午後11時11分、Niklas von Hertzen <
[email protected]>書き込み：

下にある画像（この場合はGoogleマップのタイル）をレンダリングすることはできません
corsヘッダーが提供されていない限り、異なるオリジン
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS。
これを克服する1つの方法は、イメージのプロキシを使用することです。

—
このメールに直接返信するか、GitHubで表示してください
https://github.com/niklasvh/html2canvas/issues/485#issuecomment -66884354
。

_HARDIK SHAH_

私は同じ問題に直面しています。 これに対する解決策を見つけましたか？ html2canvasを使用してグーグルマップのスクリーンショットを取得したい。 返信に感謝します。

バンプ。 更新はありますか？

オプションでuseCORS: trueを渡すと、問題が修正されました。 また、 allowTaint: false 。 これは、すべてのタイルが表示された後、関数を実行した場合、あなたが聞くことができる役立つだろうtilesloadedと実行html2canvasの後にそれが起こるの。

私は同じ問題に直面しています。 マップオプションでuseCORS：trueとallowTaint：falseを使用してみましたが、役に立ちませんでした。 ページが読み込まれた後にのみスクリーンショットを取得しようとしています。 私は何かが足りませんか？

Googleマップのスクリーンショットを撮るときにも問題が発生し、次のエラーが発生します。
ERROR Error: Uncaught (in promise): InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0. Error: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0. at CanvasRenderer.<anonymous> (html2canvas.js:6289) at step (html2canvas.js:83) at Object.next (html2canvas.js:64) at fulfilled (html2canvas.js:54) at ZoneDelegate.invoke (zone-evergreen.js:365) at Object.onInvoke (core.js:39698) at ZoneDelegate.invoke (zone-evergreen.js:364) at Zone.run (zone-evergreen.js:124) at zone-evergreen.js:851 at ZoneDelegate.invokeTask (zone-evergreen.js:400) at resolvePromise (zone-evergreen.js:793) at resolvePromise (zone-evergreen.js:752) at zone-evergreen.js:854 at ZoneDelegate.invokeTask (zone-evergreen.js:400) at Object.onInvokeTask (core.js:39679) at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Zone.runTask (zone-evergreen.js:168) at drainMicroTaskQueue (zone-evergreen.js:570) at invokeTask (zone-evergreen.js:485) at ZoneTask.invoke (zone-evergreen.js:470)

どうか、これは非常に重要です。