Html2canvas: Exportando usando o Leaflet

Forneça um exemplo do problema usando http://jsfiddle.net

Eu adicionei o jsfiddle. https://jsfiddle.net/japiasente/7ybndo5L/

São necessários alguns hacks feios para fazê-lo funcionar. Aqui está um exemplo simples sem nenhuma correção:

http://jsfiddle.net/djwbra47/

Existem vários problemas:

1. O marcador circular é cortado em um quarto de círculo. Parece que o html2canvas está recortando elementos ANTES de qualquer transformação ser aplicada. O marcador seria centralizado em 0,0 sem nenhuma transformação, então ele é recortado no quarto de círculo que seria visível nessa posição. Em seguida, o html2canvas o transforma no local real. Eu consertei isso definindo as margens esquerda e superior para 0 em vez de negativo (para que todo o marcador ficasse visível em 0,0), depois ajustando as transformações na mesma quantidade. (E, em seguida, altere esses valores de volta depois que a tela for capturada, é claro.)
2. A linha aparece no lugar errado. Parece que o html2canvas está aplicando transformações nos caminhos SVG DUAS VEZES. Sem nenhuma correção, a linha aparece muito no canto superior esquerdo. Se você alterar sua transformação para 0, ela aparecerá na mesma distância no canto inferior direito. Eu tive que definir a transformação para metade dos valores originais para fazê-la funcionar.
3. Ao deslocar o mapa, os blocos são cortados na extensão original. Este é o mesmo problema do número 1: o Leaflet move o mapa transformando o painel do mapa e o html2canvas está recortando os blocos antes que a transformação seja aplicada. Para corrigir, adicione os valores de transformação X e Y aos valores esquerdo e superior de cada img e defina suas transformações como 0.
4. Quando você move o mapa, o html2canvas desenha os blocos em cima do marcador e da linha para que eles não fiquem mais visíveis. Isso é corrigido quando você faz as alterações no número 3, mas não entendo o porquê. Talvez a ordem do desenho mude quando as propriedades de um elemento são atualizadas?

Aqui está a versão corrigida:
http://jsfiddle.net/oo2yms1h/

Ainda há um problema que ainda não resolvi: quando você move o mapa para que a linha fique perto da borda direita, ela não aparece na tela. Mas acho que é outro resultado do recorte do html2canvas antes da transformação.

Mais uma observação: o marcador de folheto padrão é uma imagem hospedada em cdn.leaflet.com que apresenta um erro CORS, o que significa que não aparecerá na tela. Qualquer um que o use com html2canvas precisaria hospedar o ícone ou mudar para um estilo de marcador diferente.

JAPiasente, parece que minha correção no número 3 pode ser adaptada para resolver seus problemas de tile e panning. Além disso, seus marcadores são caminhos SVG e parecem estar sofrendo do mesmo problema de dupla transformação que minha linha no número 2, eles estão aparecendo muito no canto superior esquerdo. Aqui está uma versão com essas alterações:

https://jsfiddle.net/6tn0zy48/

Tudo aparece no lugar certo, exceto que os marcadores estão sendo cortados mais acima do que a parte inferior do mapa. Parece que é o mesmo problema no qual ainda estou trabalhando.

Corrigir esse último problema restante não foi difícil, era apenas uma questão de definir a transformação para 0 e usar left e top em vez disso.

Meu exemplo simples, atualizado:
http://jsfiddle.net/oo2yms1h/1/

E minha correção revisada para o seu mapa:
https://jsfiddle.net/6tn0zy48/1/

Eu estava trabalhando no Chrome e notei que minha correção não funciona no Firefox e no IE. Eles estavam dando os estilos de transformação como translate em vez de translate3d, e meu código assumiu que sempre seria translate3d. E eles posicionaram os blocos usando traduzir em vez de esquerda e superior como no Chrome. Este exemplo atualizado foi revisado para todos os três navegadores. Blocos e ícones de marcadores funcionam em todos os três, mas ainda não consigo fazer com que os caminhos SVG apareçam no Firefox e no IE.

http://jsfiddle.net/oo2yms1h/3/

O IE precisava de html2canvas.svg antes de mostrar a linha, e também não funciona quando as transformações ou propriedades left/top são definidas na camada SVG. Este exemplo funciona no IE e quase funciona no Firefox:

http://jsfiddle.net/oo2yms1h/5/

Para obter a linha para mostrar no firefox, você também precisa alternar para a codificação base64 fazendo a alteração para html2canvas mencionada em #648:
https://github.com/niklasvh/html2canvas/pull/648/files

Obrigado por toda sua ajuda até agora. O único último problema agora é se eu tiver uma sobreposição svg em cima dele, o IE não está jogando bem com ele. O mapa e a sobreposição svg estão funcionando bem no chrome. Alguma ideia?

@CraigVA Você é incrível. Passei os últimos dois dias tentando corrigir esse problema. Eu gostaria de ter encontrado seus jsfiddles mais cedo. Obrigado!!!

Eu tive um problema ao usar a solução @CraigVA em que, se eu deslocar o mapa, as sobreposições ficariam fora do centro dos blocos.

Para combatê-lo, tudo o que fiz foi uma função redraw() que definia a visão para algum outro lugar no oceano por um segundo e depois definia a visão de volta para onde estava. Funciona bem.

function redraw() {
    var lat_tmp = map.getCenter().lat;
    var lng_tmp = map.getCenter().lng;
    map.setView([-66.22149259832975, -1.142578125]);
    setTimeout(function () {
        waitForTilesToLoad()
    }, 50000);
    map.setView([lat_tmp, lng_tmp]);
}

Caso alguém se depare com isso e tenha o mesmo problema.

Oi, obrigado por este hack, funciona bem, exceto para camadas de caminho e para grandes TileLayers.

• Se uma parte de uma camada Path (polígono/polilinha) estiver fora dos limites originais do mapa, ela será cortada por html2canvas quando eu mover o mapa.
  Atualizei seu código aqui http://jsfiddle.net/c8LL4qfo/ com uma polilinha mais longa. Tente mover o mapa, você verá que a linha está recortada na tela.
  Alguma ideia de como resolver esse bug?

• Segundo ponto: se tileLayers for muito grande, o html2canvas não está esperando o mapa renderizar. Mesmo com UseCors=true. Existe alguma maneira de esperar o carregamento de tileLayers? Eu estava pensando em usar o evento load, mas não tenho ideia de como poderia.

obrigado

Isso ainda é um problema com a v1.0.0 ? Em caso afirmativo, você poderia compartilhar um exemplo em jsfiddle .

Resolvi esse problema usando React : o componente do folheto é redefinido após mover o mapa, mantendo no estado o último centro e o nível de zoom. Não há mais conflito com o html2canvas, pois o mapa fornecido é um novo mapa.

Ok, fiz a atualização no código do jsfiddle aqui: http://jsfiddle.net/2zkLkLxc/
Não há mais problemas de recorte com a V1.0.0, mas temos problemas de volta com recorte de ícones (a qualquer momento) e recorte de blocos ao mover o mapa.
Eu tentei remover os hacks em telhas e isso não muda nada.

É estranho, porque atualizei para v.1.0.0 no meu código e não tenho recorte de ícones.

Este problema foi encerrado automaticamente porque não houve resposta à nossa solicitação de mais informações do autor original. Com apenas as informações que estão atualmente no problema, não temos informações suficientes para agir. Entre em contato se tiver ou encontrar as respostas de que precisamos para que possamos investigar mais a fundo.

Eu tenho o mesmo problema, mas usei o Leaflet Map em vez do Google Map.
O código está abaixo

var transform=$(".leaflet-map-pane").css("transform");
se (transformar) {
var c = transform.split(",");
var d = parseFloat(c[4]);
var h = parseFloat(c[5]);
$(".leaflet-map-pane").css({
"transform": "nenhum",
"esquerda": d,
"topo": h
})
}
html2canvas(document.body).then(function(canvas){
$(".leaflet-map-pane").css({
esquerda: 0,
topo: 0,
"transformar": transformar
})
} // Aqui é usado html2canvas 1.0.0-alpha.9

@CraigVA Muito obrigado!

Eu tenho um problema no momento no stackoverflow em relação ao problema de recorte. Estou usando o folheto 1.3.1. Se alguém puder me dar uma orientação, agradeceria muito. A questão está aqui.

@niklasvh O problema ainda está lá: http://jsfiddle.net/x3jzsg9b/4/

O problema ainda está lá: https://jsfiddle.net/x512pgjt/269/

@amarandon @bomba1990

Tente remover o preenchimento do renderizador do seu mapa. Funcionou para mim.

map.getRenderer(map).options.padding = 0;

Isso funcionou lindamente!

html2canvas(document.querySelector("#mapid"), {
allowTaint: verdadeiro,
use CORS: true
}).then(canvas => {
document.body.appendChild(canvas)
});