Question

我尝试使用hml2canvas将google map转换为图像。但这并没有帮助我。我有一个空的png文件。请帮忙。

我尝试了几种解决方案，但对我没有用 https://github.com/niklasvh/html2canvas/issues/145#issuecomment-11449761 http://jsfiddle.net/Behseini/j17mwmjm/

我无法使用Google静态API，因为我从kml文件生成了Google地图，并且坐标超过了GET Url限制。

    <div id="map-canvas" style="height: 500px;"></div>
    <div id="maptoimage"><img id="imagemap" src="" /></div>
     <script>
        html2canvas($("#map-canvas"), {
        seCORS: true,
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);

            // Convert and download as image 
            Canvas2Image.saveAsPNG(canvas);
            // to show the generated image in div
            $("#maptoimage").append(canvas);
            // Clean up 
            //document.body.removeChild(canvas);
        }
     });
     </script>

Google地图已加载到地图画布div中。

Answer 1

这在我的Windows chrome浏览器中有效，唯一的问题是下载的图像文件没有扩展名，但是当我重命名并添加.png

时它可以工作

请注意，您有错字，并且在u缺少useCORS，这会阻止某些图像被加载。

$(function () {
  html2canvas($("#map-canvas"), {
    useCORS: true,
    onrendered: function(canvas) {
      document.body.appendChild(canvas);

      // Convert and download as image 
      Canvas2Image.saveAsPNG(canvas);
      // to show the generated image in div
      $("#maptoimage").append(canvas);
      // Clean up 
      //document.body.removeChild(canvas);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Original:
<div id="map-canvas"><img src="https://i.imgur.com/raCdHzP.png"></div>
Copy:
<div id="maptoimage"></div>

Answer 2

这是一个工作代码段，通过该代码段，我可以获取有效且可读的PNG文件，并带有适当的.png扩展名和自定义文件名。

function initMap() {

  var map;
  var latlng = new google.maps.LatLng(49.241943, -122.889318);
  var myOptions = {
    zoom: 12,
    center: latlng,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
}

function saveAs(uri, filename) {

  var link = document.createElement('a');

  if (typeof link.download === 'string') {

    link.href = uri;
    link.download = filename;

    //Firefox requires the link to be in the body
    document.body.appendChild(link);

    //simulate click
    link.click();

    //remove the link when done
    document.body.removeChild(link);
  } else {
    window.open(uri);
  }
}

$(function() {
  $("#btnSave").click(function() {
    html2canvas($("#map-canvas"), {
      useCORS: true,
      onrendered: function(canvas) {
        saveAs(canvas.toDataURL(), 'my-cool-filename.png');
      }
    });
  });
});

#map-canvas {
  height: 150px;
  width: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map-canvas"></div>

<script src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>

<script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.min.js"></script>

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

<input type="button" id="btnSave" value="Save PNG" />

无法使用html2canvas将Google Map转换为图像

2 个答案: