html2canvas ne fonctionne pas avec Google Maps Pan

Je suis en utilisant html2canvas pour sauver mon en ligne la carte comme une image (Voir l'Enregistrer en tant que lien de l'Image). Je l'ai essayé sous Firefox, Chrome et Opera.

Il a tendance à travailler plus souvent si vous ne modifiez pas la valeur par défaut de la carte. Si vous effectuez un zoom avant et puis pan la carte, il est moins susceptible de travailler. La carte de pan, mais html2canvas allez utiliser l'ancien centre et de la carte. Et html2canvas ne parvient pas à charger les tuiles de carte pour la nouvelle carte de limite.

La carte casseroles correctement, mais html2canvas utilise le vieux centre et de la carte. Pourquoi est-ce?

À l'appui d'obtenir des images à partir de différents domaines que j'ai le paramètre:

useCors: true;

J'ai essayé les solutions suivantes

-De modifier manuellement le type de carte. Parfois, cela corrige.

-Déclenchement le navigateur de l'événement de redimensionnement - pas utile.

-À l'aide de setTimeout() pour attendre 2000 ms afin d'assurer les tuiles sont chargés - pas utile

-L'utilisation d'un proxy (html2canvas_proxy_php.php - pas utile

-À l'aide de google maps à l'inactivité de l'événement à attendre pour la carte d'inactivité avant l'enregistrement - pas utile

J'ai peut-être en cours d'exécution sur un problème avec la Même Origine. Mais alors je ne sais pas pourquoi ce serait sporadiques. Je suis accéder aux images et javascript à partir de différents serveurs.
Si j'ajoute le "allowTaint:true au paramètre", puis il enregistre mon image calque de la carte, mais ne pas enregistrer la carte sous-jacente de la couche.
J'ai peut-être besoin d'attendre pour la carte pan à la fin du chargement de l'image tuiles, avant que j'essaie d'enregistrer l'image.
Qu'est-ce vers le bas-droit de vote? Est-ce parce que le problème est sporadique?
avez-vous essayé nihilogic.dk/labs/canvas2image canvas2image?

OriginalL'auteur Aaron Kreider | 2014-06-04

  1. 61

    Apparemment, le problème semble provenir de html2canvas ne pas être en mesure de rendre css transforme, au moins dans google chrome (j'ai seulement pu reproduire le problème dans chrome, sur OSX). Le conteneur qui contient les tuiles, est traduit à l'aide de -webkit-transform. Donc, ce que nous pourrions faire est de saisir les valeurs que le conteneur est décalé, supprimer les transformer, de les assigner left et top de valeurs que nous avons eu transform ensuite utiliser html2canvas. Alors si la carte ne prend pas de pause, nous réinitialisation de la carte du css valeurs lorsque html2canvas est fait.

    J'ai donc collé 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
    })
  }
});
    Génial! Je l'ai eu pour enregistrer l'image dans une nouvelle fenêtre. Solution fonctionne dans Firefox, Chrome et Opera.
    Vous êtes incroyable! Fonctionne sur IE pour moi aussi
    Merci beaucoup. Vous avez enregistré beaucoup de mon temps 🙂
    merveilleux, il fonctionne.
    StreetView, par défaut, utilise webgl, puis les transformations 3d sur des images qui html2canvas ne peut pas traiter. Solution facile est de mettre en mode streetview/rendu html4. Exemple ici: jsfiddle.net/L0c3mL53

    OriginalL'auteur

  2. 7

    Après Google Maps mise à jour de la solution de mfirdaus arrêt de travail, la nouvelle solution est: est-ce 

    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 la même, mais u besoin de changer de sélecteur de

    .gm-style>div:first>div

    à

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

    Mains

    OriginalL'auteur

  3. 2

    J'ai le même problème, mais j'ai utilisé de la Notice de la Carte 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
    bonjour, j'ai ce problème avec Dépliant de Cartes et de wkhtmltopdf, savez-vous comment le résoudre?
    J'ai juste utilisé le code ci-dessus
    merci! J'ai déjà résolu!

    OriginalL'auteur