html2canvas用来进行google地图截屏生成图片一共有两个问题。
第一个问题是跨域问题,解决办法:useCORS: true。
第二个问题是图片生成不完整。完整的地图是由很多图片碎片组成的。截屏的时候总会少了最右边和最下边的图片碎片。
原因是html2canvas,不支持transform。需要将transform转成left和top。
解决办法如下。
function generatePicture() {
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,
});
html2canvas($(".gm-style"), {
useCORS: true,
scale: 3,
onrendered: function(canvas) {
var url = canvas.toDataURL();
$('.js-Base64Img').attr('src', url);
$(".gm-style>div:first>div:first>div:last>div").css({
left:0,
top:0,
"transform":transform
});
},
});
}
其中由于地图版本的不同。
选择器$(".gm-style>div:first>div:first>div:last>div")。有可能会有不同。
可以先找到class='gm-style'的div.然后去其后代元素中找。包含很多地图残片,并且带有transform的那个div就是了。如下图。