html2canvas ，google地图截屏不完整问题

最新推荐文章于 2025-07-11 16:09:48 发布

bbbzhuzhu

最新推荐文章于 2025-07-11 16:09:48 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

文章标签： html2canvas google地图截图

本文链接：https://blog.youkuaiyun.com/bbbzhuzhu/article/details/88862680

html2canvas在截取google地图时遇到跨域和图片不完整的问题。跨域通过设置useCORS: true解决。地图不完整因不支持transform，需转换为left和top属性。解决方案是找到包含地图碎片且带有transform属性的div，可能的选择器是".gm-style>div:first>div:first>div:last>div"，但实际选择器会因地图版本变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);