保存谷歌地圖作爲圖像 - 使用JavaScript（能夠截圖）

Question

我提到以下SO問題來捕獲谷歌地圖使用JavaScript（html2canvas）的屏幕截圖。 feedback.js,screen-capturing-using-html2canvas,create-screen-shot,capture-div-into-image,html2canvas-github。

我用靜態地圖來獲取圖像，但我有接近150個標記，並且URL的總長度超出了2048個字符的限制。

我能夠在javascript中使用事件偵聽器捕獲屏幕截圖。我用來捕捉圖像的代碼如下。我嘗試使用window.save，但html2canvas.js中沒有這種方法。有關如何將圖像保存到本地文件系統的任何建議？

function takeImage() { 
    html2canvas($("#map-canvas"), { 
     onrendered: function(canvas) { 
      var img = canvas.toDataURL("image/png") 
      window.open(img); 
      //window.save(img); /*does not work.*/ 
     } 
    }); 
} 

事件監聽器：

google.maps.event.addListener(map, 'tilesloaded', function() { 
    takeImage();  
}); 

Answer 1

我有問題，IE9，並在Chrome中，一些圖像被下載，但他們已損壞。我唯一找到的解決方案是在一個新標籤上打開圖像，然後我可以右鍵單擊並保存爲。 我使用html2canvas作爲圖像下載div區域（地圖的容器）的下一個代碼。

function download_image() { 
    if($.browser.safari) {// 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([$("#div_id")[0]], { 
     logging: false, 
     useCORS: true, 
     onrendered: function (canvas) { 
      if ($("#downloadimg").length > 0) 
       $("#downloadimg").remove(); 
      var fileName = "file_name.png"; 
      if (/\bMSIE|Trident\b/.test(navigator.userAgent) && $.browser.version.match(/9.0|10.0|11.0/)) {//Only for IE 9, 10 and 11 
       download_image_IE(canvas, fileName); 
      } 
      else { 
       $("body").append("<a id='downloadimg' download='" + fileName + "' href='" + canvas.toDataURL("image/png").replace("image/png", "image/octet-stream") + "'><a/>"); 
      } 
      if ($("#downloadimg").length > 0) 
       $("#downloadimg")[0].click(); 

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

function download_image_IE(canvas, filename) { 
    if ($.browser.version.match(/9.0/)){ //Only for IE9 
     var w = window.open(); 
     $(w.document.body).html('<img src="'+ canvas.toDataURL() +'"/>'); 
    } 
    else{ 
     var image = canvas.toDataURL(); 
     image = image.substring(22); // remove data stuff 
     var byteString = atob(image); 
     var buffer = new ArrayBuffer(byteString.length); 
     var intArray = new Uint8Array(buffer); 
     for (var i = 0; i < byteString.length; i++) { 
      intArray[i] = byteString.charCodeAt(i); 
     } 
     var blob = new Blob([buffer], { type: "image/png" }); 
     window.navigator.msSaveOrOpenBlob(blob, filename); 
    } 
}