我正在使用html2canvas将我的在线地图另存为图像（请参阅另存为图像链接）。我已经在Firefox，Chrome和Opera中进行了尝试。
如果您不更改默认地图，它往往会更频繁地工作。如果先缩放然后平移地图，则不太可能起作用。地图将平移，但是html2canvas将使用旧的中心点和地图边界。html2canvas将无法为新的地图边界加载地图图块。
地图可以正常平移，但是html2canvas使用旧的中心点和地图边界。为什么是这样？
为了支持从不同域获取图像，我有以下设置：
useCors: true;
我尝试了以下解决方案
-手动更改地图类型。有时这可以解决。
-触发浏览器调整大小事件-没用。
-使用setTimeout（）等待2000毫秒以确保切片已加载-无用
-使用代理（html2canvas_proxy_php.php）-没用
-使用Google Maps idle事件在保存之前等待地图空闲-没有用
显然，问题似乎源于html2canvas至少在chrome中无法渲染css转换（我只能在OSX上的chrome中再现该问题）。存放图块的容器使用进行翻译-webkit-transform。所以，我们可以做的就是抓住该容器被移位的值，去掉变换，分配left和top从我们下了值transform，然后使用html2canvas。这样，地图就不会损坏，完成后我们将重置地图的css值html2canvas。
所以我将其粘贴到您站点的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
})
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句