使用 html2canvas 捕获图像后无法加载谷歌地图答案

【问题标题】：Unable to load google map after capturing image with html2canvas使用 html2canvas 捕获图像后无法加载谷歌地图
【发布时间】：2017-12-19 15:41:53
【问题描述】：

我想使用 html2canvas 捕获谷歌地图图像，但问题是当我捕获图像时，除了方向之外我看不到谷歌地图。有人可以帮我解决这个问题吗。下面是参考图片，我也在附上代码。

function getScreenShot() {

      html2canvas(document.querySelector("#map")).then(canvas => {

      var img = canvas.toDataURL();
      window.open(img);
      height=height,
      width=width

  });
 }

Before capturing image.

After capturing image.

【问题讨论】：

标签： javascript html css web html2canvas

【解决方案1】：

你为什么不用staticmap谷歌地图的概念呢？使用 staticmap 您可以轻松创建图像。您可以在下面看到相同的功能。

  function getScreenShot() {
    //google static map url
    var staticM_URL = "https://maps.googleapis.com/maps/api/staticmap";

    //Set the Google Map Center.
    staticM_URL += "?center=" + mapOptions.center.lat() + "," + mapOptions.center.lng();

    staticM_URL  += "&size=520x650";  //Set the Google Map Size. 

    staticM_URL  += "&zoom=" + mapOptions.zoom;  //Set the Google Map Zoom. 

    staticM_URL  += "&maptype=" + mapOptions.mapTypeId;//Set the Google Map Type.

    //Loop and add Markers.
    for (var i = 0; i < markers.length; i++) {
        staticM_URL  += "&markers=color:red|" + markers[i].lat + "," + markers[i].lng;
    }

   window.open(staticM_URL);
}

一些对您有帮助的参考网址。 https://staticmapmaker.com/google/ https://www.aspsnippets.com/Articles/Take-Screenshot-Snapshot-of-Google-Maps-using-JavaScript.aspx

【讨论】：

我使用了谷歌静态地图，但问题是我必须使用一些飞行路径和图标，正如你可以在地图图像上看到的那样，为此，我使用了一些 javascript 代码。因此，在这种情况下，我想要该特定图像的屏幕截图，但如您所见，我没有得到我想要的。
您能否在选项中传递 useCORS: true，这解决了我的问题？
谢谢。但是我也尝试过使用 useCORS ，但是如果我使用它，我在另一个窗口中打开时无法得到任何响应。
这里有同样的问题，但是我试图使用 jspdf 将图像保存在 pdf 中。我已经在使用 staticmap，但它只有在 html2canvas 调用中通过 useCORS: true 后才起作用。谢谢@dipmala
请将您的整个代码放在 jsfiddle 或此处，以便得到确切的问题。