Html2canvas: tomar captura de pantalla del mapa de Google usando javascript

No puede renderizar imágenes (mosaicos de Google Maps en este caso) que residen en un origen diferente a menos que se sirvan con encabezados cors . Una forma de superar esto es utilizando un proxy para las imágenes.

Lo intenté con el servidor proxy php pero enfrenta el error: "No capturado
SecurityError: No se pudo ejecutar 'toDataURL' en 'HTMLCanvasElement':
No se pueden exportar lienzos contaminados ".

He probado este servidor proxy:
https://github.com/brcontainer/html2canvas-php-proxy ,
Con el servidor proxy anterior he usado la dirección del mapa de Google:
https://developers.google.com/maps/documentation/javascript/examples/directions-simple

El sábado 13 de diciembre de 2014 a las 11:11 p.m., Niklas von Hertzen <
[email protected]> escribió:

No puede renderizar imágenes (mosaicos de Google Maps en este caso) que residen debajo
origen diferente a menos que se sirvan con encabezados cors
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS.
Una forma de superar esto es utilizando un proxy para las imágenes.

-
Responda a este correo electrónico directamente o véalo en GitHub
https://github.com/niklasvh/html2canvas/issues/485#issuecomment -66884354
.

_HARDIK SHAH_

Estoy enfrentando el mismo problema. ¿Encontraste una solución para esto? Quiero obtener una captura de pantalla para mapas de Google usando html2canvas. Agradezco tu respuesta.

Bache. ¿Alguna actualización?

Pasar useCORS: true en las opciones solucionó el problema. Además, allowTaint: false . Sería útil si ejecuta la función después de que todos los mosaicos estén visibles, puede escuchar tilesloaded y ejecutar html2canvas después de que eso suceda.

Estoy enfrentando el mismo problema. Intenté usar useCORS: true y allowTaint: false en las Opciones de mapa, pero eso no ayudó. Estoy tratando de obtener la captura de pantalla solo después de que se cargue la página. ¿Me estoy perdiendo algo?

También tengo un problema al tomar capturas de pantalla de Google Maps, aparece este error:
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)

Por favor, esto es muy importante.