Html2canvas: 生成地图图像的问题（谷歌地图）

创建于 2014-03-06 · 51评论 · 资料来源: niklasvh/html2canvas

嗨，大家好。
我需要生成我的对话框的图像：

使用 html2canvas，但图像创建不显示地图：

我的代码：

            function imagem()
            {
                var html2obj = html2canvas($('#dialogPrint'));
                var queue  = html2obj.parse();
                var canvas = html2obj.render(queue);
                var img = canvas.toDataURL();
                window.open(img);
            };

我需要帮助，请。
谢谢

Needs More Information

资料来源

DanielSBelo

最有用的评论

似乎在新版本的 google maps 中变换应用于不同的 div。使用@GCorbel的解决方案但使用此选择器（“.gm-style>div:first>div:first>div:last>div”）似乎有效。虽然我还没有彻底测试过。

rSensation 于 2018-02-27

❤9 👍6

所有51条评论

问题是，谷歌地图使用 CSS3 转换矩阵，在 html2canvas 中没有完全实现。

bkralik 于 2014-03-06

我该怎么办？

DanielSBelo 于 2014-03-06

谷歌地图图像（外部服务器中的图像）？

使用代理： https :

brcontainer 于 2014-03-06

brcontainer：我认为这是非法的（直接从另一台计算机 /proxy/ 访问地图图块）。唯一的方法是使用 CORS。

bkralik 于 2014-03-06

@bkralik代理不仅可以让您访问“被阻止的站点”，代理术语还有其他含义，以防 html2canvas 的代理用于使 javascript API 从外部服务器打开图像，就好像它在您的本地站点上一样。

代理使下载的外部服务器和 html2canvas 仅在下载完成后加载图像。

阅读此http://en.wikipedia.org/wiki/Same_origin_policy以了解该主题。

brcontainer 于 2014-03-06

我如何使用这个代理？

DanielSBelo 于 2014-03-06

该链接表示您已经使用了所有使用代理的链接（在 php 语言、C#（asp.net）、python 和 VB（asp 经典）中）。

也许你没有注意到代理的链接，那么我在这里给你：
https://github.com/niklasvh/html2canvas/wiki/Proxies

brcontainer 于 2014-03-06

使用新库时最好阅读整个 README。

brcontainer 于 2014-03-06

@brcontainer我知道这个代理是做什么的——当客户端想要截图页面时，然后服务器将所有图片下载到本地文件夹，然后客户端加载它们。但那是错误的 - 因为谷歌不允许直接使用他们的瓷砖服务器 - 从他们的角度来看，有人突然将大量瓷砖下载到服务器而不查看网页......

bkralik 于 2014-03-06

我正在使用 Java。
你有一个使用代理的例子吗？

DanielSBelo 于 2014-03-06

@brcontainer正如我所提到的，CSS3 转换确实存在问题，因为在 Google Chrome 上运行的 googlemaps 使用它们，因此当前实现无法筛选地图。相信我，我在我写的项目中遇到了这个问题......

bkralik 于 2014-03-06

@bkralik那么，我该怎么办？
你有什么例子吗？

DanielSBelo 于 2014-03-06

我也用 java 编程（我已经用 PHP、C# 和 VB 创建了代理），但我没有时间用 Java 创建代理，也许我可以在周日做。

它的应用程序是JSP 还是“Java Desktop”？

brcontainer 于 2014-03-06

@brcontainer这是一个网络应用程序，使用 JSF、Primefaces、Javascript 和 Java

DanielSBelo 于 2014-03-06

@DanielSBelo JSF框架我没用过，我用纯Java编程，没有框架，不知道用java部分的代码实现当前代码是否容易。我想帮他，但实在来不及。

[编辑]
关于 css 转换支持，请阅读： https :

brcontainer 于 2014-03-06

@DanielSBelo您是否为此找到了一个好的解决方案？我有同样的问题。

将地图保存为画布在 Firefox 中可以正常工作，但无法在 Chrome 中保存地图。我认为这与转换没有直接关系，而更有可能与 Chrome 处理 COR 的方式有关。不过，我完全无法找到答案。

TGOlson 于 2014-08-10

@TGOlson CSS3 转换确实存在问题，因为当前版本的 html2canvas 只能渲染“一级”转换 - 它不会堆叠它们。
您可以简单地通过使用谷歌地图来验证问题出在转换中 - 通常，会给出这样的屏幕截图：
map_2014-08-10_10-44-02
（在 css 中，整个地图的位置正确，但在禁用 css3 后，会发生这种情况）
唯一的解决方案是实现整个 css3 转换堆栈。我不知道，如果 Niklas 正在进行，但应该有人去做 :-)

bkralik 于 2014-08-10

👍5

alanramires 于 2014-11-26

我也有同样的问题 - 仅在 Chrome 中。我正在使用 html2canvas-proxy-php。其他浏览器工作正常。地图的某些部分丢失了……似乎与调整地图大小、添加/删除叠加层等有关

PhaedrusTheGreek 于 2014-12-16

仅供参考 - 如果您需要快速启动并运行一些地图捕获功能，您可以随时使用谷歌街景或静态地图 API。基本上，重建当前用户在地图上看到的内容（ map.getPov等），然后从谷歌获取该静态图像。

TGOlson 于 2014-12-16

我认为这种方法不适用于叠加层

PhaedrusTheGreek 于 2014-12-16

我刚刚偶然发现了这个问题。如果我没记错的话，这个 stackoverflow 问题展示了这个问题，我通过阅读 css3 转换并将它们作为普通 CSS 位置应用来提供了一种解决方法。

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,
})

也许，可以在渲染时检查 css3 转换并自动转换为正常的 CSS 定位，然后在渲染后删除它们。

mfirdaus 于 2015-01-28

我有一个不稳定的屏幕捕获功能。
在完全重新加载页面后工作（在 firefox 上使用 CTLR+R）

这是我的代码，基本上它的作用是生成一个捕获的窗口打印屏幕的 64 base/png 图像和我放入的最终结果标记以查看它是否有效。

这里是函数

功能 ebfPrintScreen(componentName)
{
html2cavnas
([文档.正文],
{
日志记录：真实，
使用CORS：真，
onrendered：函数（画布）
{
img = canvas.toDataURL("图片/jpg");

                                                  console.log(img.length);
                                                  console.log(img);

                                                  var imgComp = $c(conponentName);
                                                  imgComp.img.src = img

                                          }
                      }
                );

}

主要目标是在创建后捕获谷歌地图路线，但正如我所说，有时它起作用，有时不起作用。关于发生了什么的任何线索？

alanramires 于 2015-03-13

我有同样的问题。我在缩放和平移之后去拍摄地图的图像，更大的部分，甚至整个地图，突然都笼罩在浅棕色中。如果有人在 Chrome 中解决了这个问题，请告诉我。

JordonGreene 于 2015-11-17

尝试了@mfirdaus的解决方案，它适用于 noraml 地图视图，但是，在街景中，它仍然坏了......有人有同样的问题吗？

cht8687 于 2015-12-07

应用@mfirdaus的解决方案后，我能够捕获地图视图。但不知何故，下面的代码使地图无法使用（但 html2canvas 可用）：

$(".gm-style>div:first>div").css({ //get the map container. not sure if stable
      "transform":"none",
      "left":mapleft,
      "top":maptop,
    })

有没有办法“恢复”那条线正在做什么？现在我再次调用 initMap 函数，以便在调用带有转换代码的 html2canvas 函数后使地图工作。

gariem 于 2016-06-06

上述脚本适用于 Google Maps v3 吗？

我的要求是截取 Google Map v3 的屏幕截图，并在其上绘制一条路线。

它在 Firefox 中运行良好，但在 Chrome 中没有标记或路由。我已经在使用自定义标记。

我很难调试，因为控制台中没有错误并且日志记录非常有限。

有没有人在 Chrome 中解决过这个问题？我尝试了两种语言的代理脚本，但似乎都没有什么区别。

o1webdawg 于 2016-10-14

👍1

我有一个类似的问题，我从互联网上复制/剪切了这段代码：

  if($.browser.safari) {// Fix for Chrome
    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")[0]], {
    logging: false,
    useCORS: true,
    onrendered: function (canvas) {
      $('#screenshot').after(canvas);

      if($.browser.safari) {// Fix for Chrome
        $(".gm-style>div:first>div").css({
          left:0,
          top:0,
          "transform":transform
        });
      }
    }
  });

它有效，但如果我用处理程序移动地图，它就不起作用。我使用标记、多边形等。它也适用于 Firefox（我可以移动地图）但不适用于 chrome。

任何的想法？

GCorbel 于 2016-11-22

固定的！

我愚蠢地复制/粘贴的 chrome 修复程序没有被触发。

我这样做了：

  if(window.chrome) {// Fix for Chrome
    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 > div.g-map-canvas > div > div > div:nth-child(1)")[0]], {
    logging: false,
    useCORS: true,
    onrendered: function (canvas) {
      $('#screenshot').after(canvas);

      if(window.chrome) {// Fix for Chrome
        $(".gm-style>div:first>div").css({
          left:0,
          top:0,
          "transform":transform
        });
      }
    }
  });

html2canvas 中很长的选择器是为了让地图没有按钮和选项。

我现在工作，谢谢。

GCorbel 于 2016-11-22

👍5 ❤1

谢谢@GCorbel它适用于您的解决方案。

tankhuu 于 2017-07-20

上述解决方法适用于渲染地图，但顶部控件要么丢失，要么位置错误。有任何想法吗？

cpamp 于 2017-08-23

这仍然是v1.0.0的问题吗？如果是这样，你能不能分享一个关于jsfiddle的例子。

niklasvh 于 2017-12-12

此问题已自动关闭，因为我们要求原作者提供更多信息的请求没有得到回应。只有当前问题中的信息，我们没有足够的信息来采取行动。如果您有或找到我们需要的答案，请联系我们，以便我们进一步调查。

no-response[bot] 于 2017-12-12

@niklasvh我可以确认它仍然是最新版本的问题。这是我在测试此问题时创建的小提琴： http :

小提琴显示了链接的stackoverflow问题中描述的问题，不一定是该线程的OP中的内容。如果不平移地图，则获取要复制的地图没有问题。平移地图后，在 Chrome 中而不是在 FireFox 中，复制的地图在最初加载的区域之外将是空白的。

此线程中给出的修复程序似乎确实解决了问题。

Ananda-Pryana 于 2018-01-31

@Ananda-Pryana 我试过你的 jsFiddle 但是这个修复似乎不再起作用了。还有其他解决方案吗？

提前致谢。

Juuuke 于 2018-02-14

👍2

看起来最近发布的最新版本的谷歌地图（v3.32）有一个新的实验渲染器。
https://developers.google.com/maps/documentation/javascript/releases

这已经破坏了修复。我只做了一个快速测试，但现在似乎所有浏览器（不仅仅是 Chrome）的问题都一样，所以希望这能让下一个版本的 html2canvas 更容易修复？

但是一个快速的解决方法是使用旧版本的 gmap，修复仍然可以正常工作。

Ananda-Pryana 于 2018-02-15

👍5

@Ananda-Pryana 是的，我降级了 gmap，成功了，谢谢。

Juuuke 于 2018-02-15

谢谢@Ananda-Pryana！上周我进行了这项工作，然后将其移至新平台，我认为此举破坏了它。假设新环境是罪魁祸首，我完全陷入了困境。我降级到 3.30，一切都很好。

OneTrueBean 于 2018-02-16

👍1

rSensation 于 2018-02-27

❤9 👍6

@rSensation提示在最新版本中就像一个魅力。谢谢！

FelipeMicali 于 2018-02-27

嗯似乎这个问题又回来了，我必须平移地图才能看到问题，当我平移并使用 Html2Canvas 来获取屏幕抓取时，某些区域显示为空白灰色？

OneTrueBean 于 2018-03-21

👍4

对于任何处理覆盖层被切断的人 -
@GCorbel的选择器只转换谷歌地图层。如果您有其他叠加层，则必须找到它们所在的 div（例如， $('.gm-style>div:first>div:first>div:first>div:first>div')是我的叠加层 div 之一，并将相同的转换应用于 css。

mylesboone 于 2018-08-16

@mylesboone你是如何找到叠加层是哪个 div 的？我目前正在努力解决覆盖层被切断的相同问题。

我目前使用 GmapMarker 和 GmapPolyline 作为叠加层。

sunghunOW 于 2018-08-21

@sunghunOW
可以在此处找到解决方案https://github.com/niklasvh/html2canvas/issues/1568
您可以使用浏览器的检查工具查看哪些 div 需要转换。

mylesboone 于 2018-08-21

我发现的最佳解决方案：

hseeda 于 2018-09-11

    html2canvas($('.gm-style>div:eq(0)')[0],{
        useCORS: true,
        allowTaint: true,
        async:false,
    }).then(canvas => {document.body.appendChild(canvas)});

hseeda 于 2018-09-11

👍6 🚀3 ❤1

    html2canvas($('.gm-style>div:eq(0)')[0],{
        useCORS: true,
        allowTaint: true,
        async:false,
    }).then(canvas => {document.body.appendChild(canvas)});

这给我画布没有定义.. 项目的选择器应该开箱即用吗？

Jorricks 于 2018-09-24

@hseeda谢谢！你的选择器正在为我做伎俩！

这是我稍微修改的选择器，它确实有效（至少对我来说，哈哈）

const div = document.querySelector('#map > div:first-of-type')

html2canvas(div, {})

然而，现在它切断了谷歌标志，为了遵守条款和条件，它总是必须显示:(

好吧，我只是克隆节点或其他东西。我已经和这张地图战斗了一段时间了 :D

imlinus 于 2019-03-06

👍2 🚀1

这对我有用：

$('#snapshot').on('click',function () {
    html2canvas(document.querySelector('.gm-style'), 
           {useCORS:true, allowTaint: true,async:false} ).then(canvas => {
            document.body.appendChild(canvas)
    });
});

karlazz 于 2019-04-09

👍2

空白地图的问题或生成画布的错误很棘手，但最终为我修复的是添加以下配置：

ignoreElements: (node) => {
        return node.nodeName === 'IFRAME';
      }

html2canvas(mapWrapper, {
      useCORS: true,
      allowTaint: false,
      ignoreElements: (node) => {
        return node.nodeName === 'IFRAME';
      }
    }).then(canvas => {
      const url = canvas.toDataURL('image/png');
      saveAs(url, 'image3.png');
      window.URL.revokeObjectURL(url);
    });

shaji-Dev 于 2019-09-01

感谢@imlinus和@hseeda ！这个选择器非常适合我！它甚至保留了谷歌标志，谢谢！

@hseeda谢谢！你的选择器正在为我做伎俩！
这是我稍微修改的选择器，它确实有效（至少对我来说，哈哈）
const div = document.querySelector('#map > div:first-of-type')

html2canvas(div, {})
然而，现在它切断了谷歌标志，为了遵守条款和条件，它总是必须显示:(
好吧，我只是克隆节点或其他东西。我已经和这张地图战斗了一段时间了 :D

martin-paliza 于 2020-10-09

❤1

此页面是否有帮助？

0 / 5 - 0 等级

Html2canvas: 生成地图图像的问题（谷歌地图）

最有用的评论

所有51条评论

相关问题