html2canvas不适用于Google Maps Pan [英] html2canvas does not work with Google Maps Pan

问题描述

我使用html2canvas将我的在线地图保存为图片（请参阅另存为图片链接）。我已经在Firefox，Chrome和Opera上试过了。

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

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

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

  useCors：true; 
  

我已经尝试了以下解决方案

- 手动更改地图类型。有时这会修复它。

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

- 使用setTimeout等待2000毫秒，以确保瓷砖加载 - 无用

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

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

解决方案

显然，这个问题似乎源于 html2canvas 至少在chrome中无法呈现css变换（我只能在OSX上用chrome重现问题）。容纳瓷砖的容器使用 -webkit-transform 进行翻译。因此，我们可以做的是获取容器移动的值，移除变换，将 left 和 top 从我们得到的值 transform ，然后使用 html2canvas 。然后，地图不会中断，当 html2canvas 完成时，我们重置地图的css值。

所以我把它粘贴到你的站点的javascript控制台中，它似乎工作

  //获取变换值
 var transform = $（。gm-style> div：first> div）。css（transform）
 var comp = transform.split （，）//分解变换矩阵
 var mapleft = parseFloat（comp [4]）//得到左边的值
 var maptop = parseFloat（comp [5]）//得到最高值
 $（。gm-style> div：first> div）。css（{//获取地图容器。不确定是否稳定
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工作
 $（。gm-style> div：first> div）。css（{
 left：0，
 top：0，
transform ：变换
}）
} 
}）; 
  

I'm using html2canvas to save my online map as an image (See the Save as Image link). I've tried it in Firefox, Chrome and Opera.

It tends to work more often if you do not alter the default map. If you zoom and then pan the map, it is less likely to work. The map will pan, but html2canvas will use the old center point and map bounds. And html2canvas will fail to load map tiles for the new map bounds.

The map pans correctly, but html2canvas uses the old center point and map bounds. Why is this?

To support getting images from different domains I have the setting:

useCors: true;

I have tried the following solutions

-Manually changing the map type. Sometimes this fixes it.

-Triggering the browser resize event - not useful.

-Using setTimeout() to wait 2000 ms to ensure the tiles are loaded - not useful

-Using a proxy (html2canvas_proxy_php.php) - not useful

-Using the google maps idle event to wait for the map to be idle before saving - not useful

解决方案

Apparently, the problem seems to stem from html2canvas not being able to render css transforms, at least in chrome (I could only reproduce the problem in chrome, on OSX). The container that holds the tiles, is translated using -webkit-transform. So what we could do is to grab the values that the container is shifted, remove the transform, assign left and top from the values we got off transform then use html2canvas. Then so the map doesn't break, we reset the map's css values when html2canvas is done.

So I pasted this into the javascript console at your site and at it seemed to work

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

这篇关于html2canvas不适用于Google Maps Pan的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！