Google Map ne s'affiche pas lors de l'utilisation html2canvas

Question

J'ai fait le bouton capture d'écran qui doit faire la capture d'écran de tout le corps. Mais sur cette capture d'écran google map n'est pas distribuée. J'ai utilisé la bibliothèque html2canvas pour cela. Voici le code:

HTML:

<button type="button" class="btn btn-default btn-sm" id = 'screenShotBtn' onclick="takeScreenShot()"> 

JAVASCRIPT:

var takeScreenShot = function() { 
var screenshot = {}; 
html2canvas(document.getElementById('screenAll'), { 
    onrendered: function (canvas) { 
     var tempcanvas=document.createElement('canvas'); 
     tempcanvas.width=1350; 
     tempcanvas.height=700; 
     var context=tempcanvas.getContext('2d'); 
     context.drawImage(canvas,0,0,1350,700,0,0,1350,700); 
     var link=document.createElement("a"); 
     link.href=tempcanvas.toDataURL('image/jpg'); //function blocks CORS 
     link.download = 'screenshot.jpg'; 
     link.click(); 
    } 
}); 

Et voici ce que j'ai quand faire la capture d'écran:

look here for screenshot

pouvez-vous s'il vous plaît dites-moi ce qui est mal?

Answer 1

Je pense que c'est un problème connu qui est présent dans Chrome.

Vous pouvez essayer cette solution de contournement que j'ai trouvé:

if(window.chrome) {// Fix for Chrome 
    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 > div.g-map-canvas > div > div > div:nth-child(1)")[0]], { 
    logging: false, 
    useCORS: true, 
    onrendered: function (canvas) { 
     $('#screenshot').after(canvas); 

     if(window.chrome) {// Fix for Chrome 
     $(".gm-style>div:first>div").css({ 
      left:0, 
      top:0, 
      "transform":transform 
     }); 
     } 
    } 
    }); 

Lien vers le sujet d'origine: https://github.com/niklasvh/html2canvas/issues/345

Answer 2

J'ajouté ces propriétés au code et il fonctionne:

var takeScreenShot = function() { 
    var screenshot = {}; 
    html2canvas(document.getElementById('map'), { 
     useCORS: true, 
     optimized: false, 
     allowTaint: false, 
     onrendered: function (canvas) { 
      var tempcanvas=document.createElement('canvas'); 
      tempcanvas.width=1350; 
      tempcanvas.height=700; 
      var context=tempcanvas.getContext('2d'); 
      context.drawImage(canvas,0,0,1350,700,0,0,1350,700); 
      var link=document.createElement("a"); 
      link.href=tempcanvas.toDataURL('image/jpg'); //function blocks CORS 
      link.download = 'screenshot.jpg'; 
      link.click(); 
     } 
    }); 
}