Html2canvas: prendre une capture d'écran de la carte Google en utilisant javascript

Vous ne pouvez pas rendre les images (les tuiles google maps dans ce cas) qui résident sous une origine différente à moins qu'elles ne soient servies avec des en- têtes cors . Une façon de surmonter ce problème consiste à utiliser un proxy pour les images.

J'ai essayé avec le serveur proxy php mais face à une erreur: "Uncaught
SecurityError: Impossible d'exécuter 'toDataURL' sur 'HTMLCanvasElement':
Les toiles souillées ne peuvent pas être exportées. "

J'ai essayé ce serveur proxy:
https://github.com/brcontainer/html2canvas-php-proxy ,
Avec le serveur proxy ci-dessus, j'ai utilisé la direction de la carte Google:
https://developers.google.com/maps/documentation/javascript/examples/directions-simple

Le sam 13 décembre 2014 à 23:11, Niklas von Hertzen <
[email protected]> a écrit:

Vous ne pouvez pas rendre les images (les tuiles google maps dans ce cas) qui résident sous
origine différente sauf si elles sont servies avec des en-têtes cors
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS.
Une façon de surmonter ce problème consiste à utiliser un proxy pour les images.

-
Répondez directement à cet e-mail ou affichez-le sur GitHub
https://github.com/niklasvh/html2canvas/issues/485#issuecomment -66884354
.

_HARDIK SHAH_

Je suis confronté au même problème. Avez-vous trouvé une solution pour cela? Je veux obtenir une capture d'écran pour google maps en utilisant html2canvas. J'apprécie votre réponse.

Bosse. Les mises à jour?

Passer useCORS: true dans les options a résolu le problème pour moi. Aussi, allowTaint: false . Cela aiderait si vous exécutiez la fonction après que toutes les tuiles soient visibles, vous pouvez écouter le tilesloaded et exécuter html2canvas après cela.

Je suis confronté au même problème. J'ai essayé d'utiliser useCORS: true et allowTaint: false dans les options de la carte mais cela n'a pas aidé. J'essaie d'obtenir la capture d'écran uniquement après le chargement de la page. Est-ce que je manque quelque chose?

Je reçois également un problème lors de la prise de captures d'écran de Google Maps, j'obtiens cette erreur:
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)

S'il vous plaît, c'est très important.