我正在使用 html2canvas 将我的在线地图另存为图像（请参阅另存为图像链接）。我已经在 Firefox、Chrome 和 Opera 中尝试过。
如果您不更改默认地图，它往往会更频繁地工作。如果缩放然后平移地图，则不太可能起作用。地图将平移，但 html2canvas 将使用旧的中心点和地图边界。并且 html2canvas 将无法为新地图边界加载地图图块。
地图平移正确，但 html2canvas 使用旧的中心点和地图边界。为什么是这样？
为了支持从不同域获取图像，我有以下设置：
useCors: true;
我尝试了以下解决方案
- 手动更改地图类型。有时这会修复它。
- 触发浏览器调整大小事件 - 没有用。
- 使用 setTimeout() 等待 2000 毫秒以确保加载图块 - 没有用
- 使用代理 (html2canvas_proxy_php.php) - 没有用
-使用谷歌地图空闲事件在保存之前等待地图空闲 - 没有用
显然，问题似乎源于html2canvas无法渲染 css 转换，至少在 chrome 中（我只能在 OSX 上的 chrome 中重现该问题）。保存瓷砖的容器使用-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
})
}
});
在谷歌地图更新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,
})
是一样的，但你需要改变 de selector from
.gm-style>div:first>div
到
.gm-style>div:first>div:first>div:last>div
举手🙂
我有同样的问题，但我使用 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
就我而言，我只允许 html2Canvas 配置中的跨源资源共享（CORS），它对我有用。
useCORS:true,
有关更多信息，您可以参考 html2Canvas 文档：http ://html2canvas.hertzen.com/configuration
使用此代码更新谷歌地图。
// @ts-ignore html2canvas defined via script
html2canvas($('#shareScreen')[0], {
useCORS: true,
allowTaint: false,
backgroundColor: null,
ignoreElements: (node) => {
return node.nodeName === 'IFRAME';
}
}).then((canvas) => {
var dataUrl = canvas.toDataURL('image/png');
console.log(dataUrl)
this.shareLoader = false;
});