Html2canvas: Exportation à l'aide de Leaflet

Fournissez un exemple du problème en utilisant http://jsfiddle.net

J'ai ajouté le jsfiddle. https://jsfiddle.net/japiasente/7ybndo5L/

Il faut quelques vilains hacks pour le faire fonctionner. Voici un exemple simple sans aucun correctif :

http://jsfiddle.net/djwbra47/

Il y a plusieurs problèmes :

1. Le marqueur circulaire est découpé en quart de cercle. Il semble que html2canvas coupe des éléments AVANT que les transformations ne soient appliquées. Le marqueur serait centré à 0,0 sans aucune transformation, il est donc coupé sur le quart de cercle qui serait visible à cette position. Ensuite, html2canvas le transforme à l'emplacement réel. Je l'ai corrigé en définissant les marges gauche et supérieure sur 0 au lieu de négatives (afin que tout le marqueur soit visible à 0,0), puis en ajustant les transformations du même montant. (Et puis modifiez ces valeurs après la saisie du canevas, bien sûr.)
2. La ligne apparaît au mauvais endroit. Il semble que html2canvas applique des transformations sur les chemins SVG DEUX FOIS. Sans aucun correctif, la ligne apparaît trop loin en haut à gauche. Si vous changez sa transformation en 0, il apparaît à la même distance trop loin en bas à droite. J'ai dû régler la transformation sur la moitié des valeurs d'origine pour que cela fonctionne.
3. Lorsque vous effectuez un panoramique sur la carte, les tuiles sont découpées à l'étendue d'origine. Il s'agit du même problème que le numéro 1 : Leaflet effectue un panoramique de la carte en transformant le volet de la carte, et html2canvas découpe les tuiles avant que cette transformation ne soit appliquée. Pour corriger, ajoutez les valeurs de transformation X et Y aux valeurs gauche et supérieure de chaque img, puis définissez leurs transformations sur 0.
4. Lorsque vous effectuez un panoramique sur la carte, html2canvas dessine les tuiles au-dessus du marqueur et de la ligne afin qu'elles ne soient plus visibles. Ceci est corrigé lorsque vous apportez les modifications au numéro 3, mais je ne comprends pas pourquoi. Peut-être que l'ordre de dessin change lorsque les propriétés d'un élément sont mises à jour ?

Voici la version corrigée :
http://jsfiddle.net/oo2yms1h/

Il y a encore un problème que je n'ai pas encore résolu : lorsque vous effectuez un panoramique sur la carte de sorte que la ligne soit proche du bord droit, elle n'apparaît pas sur le canevas. Mais je suppose que c'est un autre résultat de l'écrêtage html2canvas avant la transformation.

Une remarque supplémentaire : le marqueur de dépliant par défaut est une image hébergée sur cdn.leaflet.com qui génère une erreur CORS, ce qui signifie qu'il n'apparaîtra pas sur le canevas. Toute personne l'utilisant avec html2canvas devrait héberger l'icône elle-même ou passer à un style de marqueur différent.

JAPiasente, il semble que mon correctif numéro 3 puisse être adapté pour résoudre vos problèmes de mosaïque et de panoramique. De plus, vos marqueurs sont des chemins SVG et semblent souffrir du même problème de double transformation que ma ligne du numéro 2, ils apparaissent trop loin en haut à gauche. Voici une version avec ces modifications :

https://jsfiddle.net/6tn0zy48/

Tout apparaît au bon endroit, sauf que les marqueurs sont coupés plus haut que le bas de la carte. On dirait que c'est le même problème sur lequel je travaille toujours.

Résoudre ce dernier problème restant n'était pas difficile, c'était juste une question de mettre la transformation à 0 et d'utiliser gauche et haut à la place.

Mon exemple simple, mis à jour :
http://jsfiddle.net/oo2yms1h/1/

Et mon correctif révisé pour votre carte :
https://jsfiddle.net/6tn0zy48/1/

Je travaillais dans Chrome et je viens de remarquer que mon correctif ne fonctionne pas dans Firefox et IE. Ils donnaient les styles de transformation comme translate au lieu de translate3d, et mon code supposait que ce serait toujours translate3d. Et ils ont positionné les tuiles en utilisant translate au lieu de left et top comme dans Chrome. Cet exemple mis à jour est révisé pour les trois navigateurs. Les vignettes et les icônes de marqueur fonctionnent dans les trois, mais je n'arrive toujours pas à faire apparaître les chemins SVG dans Firefox et IE.

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

IE avait besoin de html2canvas.svg avant d'afficher la ligne, et cela ne fonctionne pas non plus lorsque les transformations ou les propriétés left/top sont définies sur la couche SVG. Cet exemple fonctionne dans IE et fonctionne presque dans Firefox :

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

Pour que la ligne s'affiche dans firefox, vous devez également passer à l'encodage base64 en effectuant la modification de html2canvas mentionnée au #648 :
https://github.com/niklasvh/html2canvas/pull/648/files

Merci pour toute votre aide jusqu'à présent. Le seul dernier problème maintenant est que si j'ai une superposition svg dessus, IE ne joue pas bien avec. La carte et la superposition svg fonctionnent bien en chrome. Des idées?

@CraigVA Vous êtes incroyable. Je viens de passer les deux derniers jours à essayer de résoudre ce problème. J'aurais aimé rencontrer vos jsfiddles plus tôt. Merci!!!

J'ai eu un problème avec la solution @CraigVA où si je faisais un panoramique sur la carte, les superpositions seraient décentrées par rapport aux tuiles.

Pour le combattre, tout ce que j'ai fait, c'est une fonction redraw() qui définit la vue sur un autre endroit de l'océan pendant une seconde, puis la remet à l'endroit où elle se trouvait. Fonctionne bien.

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]);
}

Au cas où quelqu'un rencontrerait cela et aurait le même problème.

Salut, merci pour ce hack, ça marche bien sauf pour les calques Path et pour les gros TileLayers.

• Si une partie d'une couche Path (polygone/polyligne) est hors des limites de la carte d'origine, elle est coupée par html2canvas lorsque je déplace la carte.
  J'ai mis à jour votre code ici http://jsfiddle.net/c8LL4qfo/ avec une polyligne plus longue. Essayez de déplacer la carte, vous verrez que la ligne est coupée dans le canevas.
  Des idées sur la façon de résoudre ce bug?

• Deuxième point : si les tuiles sont trop grandes, html2canvas n'attend pas que la carte soit rendue. Même avec UseCors=true. Existe-t-il un moyen d'attendre le chargement de tileLayers ? Je pensais utiliser l'événement load, mais je ne sais pas comment je pourrais.

Merci

Est-ce toujours un problème avec la v1.0.0 ? Si oui, pourriez-vous s'il vous plaît partager un exemple sur jsfiddle .

J'ai résolu ce problème en utilisant React : le composant leaflet est réinitialisé après avoir déplacé la carte, en gardant en état le dernier centre et le niveau de zoom. Il n'y a plus de conflit avec html2canvas car la carte fournie est une nouvelle carte.

Ok, j'ai fait la mise à jour dans le code jsfiddle ici : http://jsfiddle.net/2zkLkLxc/
Il n'y a plus de problèmes d'écrêtage avec la V1.0.0 mais nous avons des problèmes de dos avec l'écrêtage des icônes (à tout moment) et l'écrêtage des tuiles lors du déplacement de la carte.
J'ai essayé de supprimer les hacks sur les tuiles et cela ne change rien.

C'est étrange, car j'ai mis à jour vers la v.1.0.0 dans mon code et je n'ai pas d'écrêtage d'icônes.

Ce problème a été automatiquement fermé car il n'y a pas eu de réponse à notre demande d'informations supplémentaires de la part de l'auteur d'origine. Avec seulement les informations qui sont actuellement dans le problème, nous n'avons pas assez d'informations pour prendre des mesures. Veuillez nous contacter si vous avez ou trouvez les réponses dont nous avons besoin afin que nous puissions enquêter plus avant.

J'ai le même problème, mais j'ai utilisé Leaflet Map au lieu de Google Map.
Le code est ci-dessous

var transform=$(".leaflet-map-pane").css("transformer");
si (transformer) {
var c = transform.split(",");
var d = parseFloat(c[4]);
var h = parseFloat(c[5]);
$(".leaflet-map-pane").css({
"transformer": "aucun",
"gauche": ré,
"haut": h
})
}
html2canvas(document.body).then(fonction(canvas){
$(".leaflet-map-pane").css({
gauche : 0,
haut : 0,
"transformer": transformer
})
} // Ici est utilisé html2canvas 1.0.0-alpha.9

@CraigVA Merci beaucoup !

J'ai un problème en ce moment sur stackoverflow concernant le problème d'écrêtage. J'utilise la notice 1.3.1. Si quelqu'un peut me donner des conseils, ce serait très apprécié. Le problème est ici.

@niklasvh Le problème est toujours là : http://jsfiddle.net/x3jzsg9b/4/

Le problème est toujours là : https://jsfiddle.net/x512pgjt/269/

@amarandon @bomba1990

Essayez de supprimer le rembourrage du moteur de rendu de votre carte. Cela a fonctionné pour moi.

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

Cela a fonctionné à merveille !

html2canvas(document.querySelector("#mapid"), {
allowTaint : vrai,
useCORS : vrai
}).then(toile => {
document.body.appendChild(toile)
});