web-dev-qa-db-fra.com

html2canvas ne fonctionne pas avec Google Maps Pan

J'utilise html2canvas pour enregistrer ma carte en ligne en tant qu'image (voir le lien Enregistrer en tant qu'image). Je l'ai essayé dans Firefox, Chrome et Opera. 

Cela a tendance à fonctionner plus souvent si vous ne modifiez pas la carte par défaut. Si vous effectuez un zoom puis un panoramique sur la carte, les chances de succès sont La carte effectuera un panoramique, mais html2canvas utilisera l’ancien point central et les limites de la carte. Et html2canvas ne parviendra pas à charger les mosaïques de carte pour les nouvelles limites de la carte. 

La carte effectue un panoramique correctement, mais html2canvas utilise l'ancien point central et les limites de la carte. Pourquoi est-ce?

Pour prendre en charge l'obtention d'images de différents domaines, j'ai le paramètre:

useCors: true;

J'ai essayé les solutions suivantes

-Modifier manuellement le type de carte. Parfois cela résout le problème.

-Trigger l'événement de redimensionnement du navigateur - inutile.

-Utilisation de setTimeout () pour attendre 2000 ms afin de s'assurer que les tuiles sont chargées - inutile

-Utilisation d'un proxy (html2canvas_proxy_php.php) - inutile

-Utilisation de l'événement inactif de Google Maps pour attendre que la carte soit inactive avant de sauvegarder - inutile

javascriptgoogle-mapshtml2canvas
20
Aaron Kreider

Apparemment, le problème semble provenir de html2canvas ne pas être en mesure de rendre les transformations CSS, du moins en chrome (je ne pouvais que reproduire le problème en chrome, sur OSX). Le conteneur qui contient les tuiles est traduit à l'aide de -webkit-transform. Nous pourrions donc saisir les valeurs de décalage du conteneur, supprimer la transformation, attribuer les valeurs left et top aux valeurs que nous avons obtenues de transform, puis utiliser html2canvas. Ensuite, pour que la carte ne casse pas, nous réinitialisons les valeurs css de la carte lorsque html2canvas est terminé. 

Alors j'ai collé ceci dans la console javascript de votre site et cela a semblé fonctionner

//get transform value
var transform=$(".gm-style>div:first>div").css("transform")
var comp=transform.split(",") //split up the transform matrix
var mapleft=parseFloat(comp[4]) //get left value
var maptop=parseFloat(comp[5])  //get top value
$(".gm-style>div:first>div").css({ //get the map container. not sure if stable
  "transform":"none",
  "left":mapleft,
  "top":maptop,
})
html2canvas($('#map-canvas'),
{
  useCORS: true,
  onrendered: function(canvas)
  {
    var dataUrl= canvas.toDataURL('image/png');
    location.href=dataUrl //for testing I never get window.open to work
    $(".gm-style>div:first>div").css({
      left:0,
      top:0,
      "transform":transform
    })
  }
});
61
mfirdaus

Après une mise à jour de Google Maps, la solution de firdaus cesse de fonctionner, voici la nouvelle solution: 

var transform = $(".gm-style>div:first>div:first>div:last>div").css("transform")
var comp = transform.split(",") //split up the transform matrix
var mapleft = parseFloat(comp[4]) //get left value
var maptop = parseFloat(comp[5])  //get top value
$(".gm-style>div:first>div:first>div:last>div").css({ //get the map container. not sure if stable
  "transform": "none",
  "left": mapleft,
  "top": maptop,
})

est le même mais il faut changer de sélecteur de

.gm-style>div:first>div

à 

.gm-style>div:first>div:first>div:last>div

Les mains en l'air ????

7
Daniel Torres Laserna

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("transform");
if (transform) {
    var c = transform.split(",");
    var d = parseFloat(c[4]);
    var h = parseFloat(c[5]);
    $(".leaflet-map-pane").css({
        "transform": "none",
        "left": d,
        "top": h
    })
}           


html2canvas(document.body).then(function(canvas){
    $(".leaflet-map-pane").css({
        left: 0,
        top: 0,
        "transform": transform
    })
   }
// Here is used html2canvas 1.0.0-alpha.9
2
Nilesh Panchal

Dans mon cas, je viens d'autoriser le partage de ressources d'origine croisée (CORS) dans la configuration html2Canvas et cela a fonctionné pour moi.

useCORS:true,

Pour plus d'informations, vous pouvez vous référer à la documentation html2Canvas: http://html2canvas.hertzen.com/configuration

0
Amit Anand