Html2canvas: Machen Sie einen Screenshot von Google Map mit Javascript

Sie können keine Bilder (in diesem Fall Google Maps-Kacheln) rendern, die sich unter einem anderen Ursprung befinden, es sei denn, sie werden mit Cors-Headern bereitgestellt . Eine Möglichkeit, dies zu überwinden, besteht darin, einen Proxy für die Bilder zu verwenden.

Ich habe versucht, mit PHP-Proxy-Server, aber mit Fehler: "Nicht gefangen
SecurityError: 'toDataURL' konnte auf 'HTMLCanvasElement' nicht ausgeführt werden:
Beschmutzte Leinwände dürfen nicht exportiert werden. "

Ich habe diesen Proxyserver ausprobiert:
https://github.com/brcontainer/html2canvas-php-proxy ,
Mit dem oben genannten Proxyserver habe ich die Google-Kartenrichtung verwendet:
https://developers.google.com/maps/documentation/javascript/examples/directions-simple

Am Samstag, den 13. Dezember 2014 um 23:11 Uhr, Niklas von Hertzen <
[email protected]> schrieb:

Sie können keine Bilder (in diesem Fall Google Maps-Kacheln) rendern, die sich unter befinden
unterschiedlicher Herkunft, es sei denn, sie werden mit Cors-Headern bedient
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS.
Eine Möglichkeit, dies zu überwinden, besteht darin, einen Proxy für die Bilder zu verwenden.

- -
Antworte direkt auf diese E-Mail oder sieh sie dir auf GitHub an
https://github.com/niklasvh/html2canvas/issues/485#issuecomment -66884354
.

HARDIK SHAH

Ich stehe vor dem gleichen Problem. Haben Sie eine Lösung dafür gefunden? Ich möchte einen Screenshot für Google Maps mit html2canvas erhalten. Schätzen Sie Ihre Antwort.

Stoßen. Irgendwelche Updates?

Das Übergeben von useCORS: true in den Optionen hat das Problem für mich behoben. Auch allowTaint: false . Wenn Sie die Funktion ausführen, nachdem alle Kacheln sichtbar sind, können Sie tilesloaded anhören und anschließend html2canvas ausführen.

Ich stehe vor dem gleichen Problem. Ich habe versucht, useCORS: true und allowTaint: false in den Kartenoptionen zu verwenden, aber das hat nicht geholfen. Ich versuche, den Screenshot erst zu erhalten, nachdem die Seite geladen wurde. Vermisse ich etwas

Beim Erstellen von Screenshots von Google Maps tritt ebenfalls ein Problem auf. Ich erhalte folgende Fehlermeldung:
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)

Bitte, das ist sehr wichtig.