将谷歌地图另存为图像 - 使用javascript(能够截取屏幕截图）

Save google map as an image - using javascript (able to take screenshot)

本文关键字：截取 屏幕截图 javascript 另存为 谷歌地图 图像 使用      更新时间：2023-09-26

我参考了以下SO问题，以使用javascript（html2canvas）捕获Google地图的屏幕截图。 feedback.js， screen-captureturing-using-html2canvas， create-screen-shot， capture-div-in-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();    
});

我在使用IE9时遇到了问题，并且在Chrome中下载了一些图像，但它们已损坏。我为 IE9 找到的唯一解决方案是在新选项卡上打开图像，然后我能够右键单击并另存为。我制作了下一个代码，用于使用 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);
    }
}
相关文章：