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

问题描述

我正在使用 html2canvas 将我的在线地图另存为图像(请参阅另存为图像链接).我已经在 Firefox、Chrome 和 Opera 中尝试过.

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.

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

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.

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

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;

我尝试了以下解决方案

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

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

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

-Triggering the browser resize event - not useful.

-使用 setTimeout() 等待 2000 毫秒以确保加载图块 - 无用

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

-使用代理 (html2canvas_proxy_php.php) - 没有用

-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

推荐答案

显然，问题似乎源于 html2canvas 无法渲染 css 转换，至少在 chrome 中(我只能重现chrome 中的问题，在 OSX 上).保存图块的容器使用 -webkit-transform 进行转换.所以我们可以做的是获取容器移动的值，移除变换，从我们从 transformleft 和 topcode> 然后使用 html2canvas.然后为了使地图不会损坏，我们在 html2canvas 完成后重置地图的 css 值.

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.

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

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屋！