Question

我正在使用html2canvas将online map保存为图像（请参阅另存为图像链接）。我在Firefox，Chrome和Opera中尝试过它。

如果您不更改默认地图，它往往会更频繁地工作。如果缩放然后平移地图，则不太可能工作。地图将平移，但html2canvas将使用旧的中心点和地图边界。并且html2canvas将无法加载新地图边界的地图图块。

地图平移正确，但html2canvas使用旧的中心点和地图边界。这是为什么？

为了支持从不同的域获取图像，我有以下设置：

useCors: true;

我尝试了以下解决方案

- 手动更改地图类型。有时这会解决它。

- 触发浏览器调整大小事件 - 没用。

- 使用setTimeout（）等待2000毫秒以确保加载切片 - 无用

- 使用代理（html2canvas_proxy_php.php） - 无用

- 使用google maps空闲事件等待地图在保存之前处于空闲状态 - 无用

Answer 1

显然，问题似乎源于html2canvas无法呈现css转换，至少在chrome中（我只能在Chrome上重现问题，在OSX上）。保存切片的容器使用-webkit-transform进行翻译。所以我们可以做的是获取容器移动的值，删除转换，从我们下载的值left中分配top和transform，然后使用html2canvas 。然后，地图不会中断，我们会在html2canvas完成时重置地图的css值。

所以我将它粘贴到您网站的javascript控制台中，似乎可以正常工作

//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
    })
  }
});

Answer 2

在Google Maps更新 mfirdaus 的解决方案停止工作后，新的解决方案是：

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,
})

相同，但是您需要从以下位置更改选择器

.gm-style>div:first>div

到

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

举起手来

Answer 3

我遇到了同样的问题，但我使用的是Leaflet Map而不是Google Map。

代码在

之下

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

Answer 4

就我而言，我只允许html2Canvas配置中的跨源资源共享（CORS），它对我有用。

useCORS:true,

有关更多信息，请参阅html2Canvas文档： https://dhtmlx.com/docs/products/dhtmlxTree/samples/05_drag_n_drop/01_drag_in_simple.html

html2canvas不适用于Google Maps Pan

4 个答案: