Html2canvas: faça uma captura de tela do google map usando javascript

Criado em 13 dez. 2014  ·  7Comentários  ·  Fonte: niklasvh/html2canvas

Oi

Tentei seguir o código: este div "# map-canvas" content google map.
$ ('# map-canvas'). html2canvas ({
onrendered: function (canvas) {
var img = canvas.toDataURL ("imagem / png");
window.open (img);
}
});
}

Usando este código, estou obtendo um mapa em branco.
Encontre a saída do mapa do Google.

Deixe-me saber como resolver esse problema.

googlemapimageusinghtml2canvas

Question

Comentários muito úteis

Passar useCORS: true nas opções resolveu o problema para mim. Além disso, allowTaint: false . Ajudaria se você executar a função depois que todos os blocos estiverem visíveis, você pode ouvir tilesloaded e executar html2canvas depois que isso acontecer.

Todos 7 comentários

Você não pode renderizar imagens (blocos do Google Maps neste caso) que residem em origens diferentes, a menos que sejam veiculadas com cabeçalhos cors . Uma maneira de superar isso é usar um proxy para as imagens.

Eu tentei com o servidor proxy php, mas encontrei o erro: "Não capturado
SecurityError: Falha ao executar 'toDataURL' em 'HTMLCanvasElement':
Telas contaminadas não podem ser exportadas. "

Eu tentei este servidor proxy:
https://github.com/brcontainer/html2canvas-php-proxy ,
Com o servidor proxy acima, usei a direção do mapa do Google:
https://developers.google.com/maps/documentation/javascript/examples/directions-simple

No sábado, 13 de dezembro de 2014 às 23h11, Niklas von Hertzen <
notificaçõ[email protected]> escreveu:

Você não pode renderizar imagens (blocos do Google Maps neste caso) que residem sob
origem diferente, a menos que sejam servidos com cabeçalhos cors
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS.
Uma maneira de superar isso é usar um proxy para as imagens.

-
Responda a este e-mail diretamente ou visualize-o no GitHub
https://github.com/niklasvh/html2canvas/issues/485#issuecomment -66884354
.

_HARDIK SHAH_

Eu estou enfrentando o mesmo problema. Você encontrou uma solução para isso? Quero obter uma captura de tela do google maps usando html2canvas. Agradeço sua resposta.

Colisão. Alguma atualização?

Passar useCORS: true nas opções resolveu o problema para mim. Além disso, allowTaint: false . Ajudaria se você executar a função depois que todos os blocos estiverem visíveis, você pode ouvir tilesloaded e executar html2canvas depois que isso acontecer.

Eu estou enfrentando o mesmo problema. Tentei usar useCORS: true e allowTaint: false nas opções do mapa, mas não ajudou. Estou tentando obter a captura de tela somente depois que a página for carregada. Estou perdendo alguma coisa?

Também estou tendo um problema ao fazer capturas de tela do Google Maps, recebo este erro:
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, isso é muito importante.

Esta página foi útil?
0 / 5 - 0 avaliações