javascript html2canvas 不适用于 Google Maps Pan
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/24046778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html2canvas does not work with Google Maps Pan
提问by Aaron Kreider
I'm using html2canvas to save my online mapas an image (See the Save as Image link). I've tried it in Firefox, Chrome and Opera.
我正在使用 html2canvas 将我的在线地图另存为图像(请参阅另存为图像链接)。我已经在 Firefox、Chrome 和 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.
如果您不更改默认地图,它往往会更频繁地工作。如果缩放然后平移地图,则不太可能起作用。地图将平移,但 html2canvas 将使用旧的中心点和地图边界。并且 html2canvas 将无法为新地图边界加载地图图块。
The map pans correctly, but html2canvas uses the old center point and map bounds. Why is this?
地图平移正确,但 html2canvas 使用旧的中心点和地图边界。为什么是这样?
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
- 使用 setTimeout() 等待 2000 毫秒以确保加载图块 - 没有用
-Using a proxy (html2canvas_proxy_php.php) - not useful
- 使用代理 (html2canvas_proxy_php.php) - 没有用
-Using the google maps idle event to wait for the map to be idle before saving - not useful
-使用谷歌地图空闲事件在保存之前等待地图空闲 - 没有用
回答by mfirdaus
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.
显然,问题似乎源于html2canvas
无法渲染 css 转换,至少在 chrome 中(我只能在 OSX 上的 chrome 中重现该问题)。保存瓷砖的容器使用-webkit-transform
. 所以我们可以做的是获取容器被移动的值,移除变换,赋值,left
然后top
从我们得到的值中transform
使用html2canvas
. 然后为了让地图不会中断,我们在html2canvas
完成后重置地图的 css 值。
So I pasted this into the javascript console at your site and at it seemed to work
所以我把它粘贴到你网站的 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
})
}
});
回答by Daniel Torres Laserna
After a Google Maps update the solution of mfirdausstop working, the new solution is this:
在谷歌地图更新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,
})
is the same but u need to change de selector from
是一样的,但你需要改变 de selector from
.gm-style>div:first>div
.gm-style>div:first>div
to
到
.gm-style>div:first>div:first>div:last>div
.gm-style>div:first>div:first>div:last>div
Hands up
举手
回答by Amit Anand
In my case i just allowed Cross Origin Resource Sharing (CORS) in the html2Canvas configuration and it worked for me.
就我而言,我只允许 html2Canvas 配置中的跨源资源共享(CORS),它对我有用。
useCORS:true,
For more info you can refer to the html2Canvas Documentation: http://html2canvas.hertzen.com/configuration
有关更多信息,您可以参考 html2Canvas 文档:http://html2canvas.hertzen.com/configuration
回答by Nilesh Panchal
I have the same problem, but I used Leaflet Map instead of Google Map.
我有同样的问题,但我使用 Leaflet Map 而不是 Google Map。
The code is below
代码如下
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