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.
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.
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 ouvirtilesloaded
e executarhtml2canvas
depois que isso acontecer.