Javascript html2canvas不适用于谷歌地图

我正在使用html2canvas将我的另存为图像（请参阅另存为图像链接）。我已经在Firefox、Chrome和Opera上试用过了

如果不更改默认映射，它往往会更频繁地工作。如果缩放然后平移地图，则不太可能工作。地图将平移，但html2canvas将使用旧的中心点和地图边界。html2canvas将无法加载新地图边界的地图分幅

地图平移正确，但html2canvas使用旧的中心点和地图边界。为什么会这样

要支持从不同域获取图像，我有以下设置：

useCors: true;

我尝试了以下解决方案

-手动更改地图类型。有时这会解决问题

-触发浏览器调整大小事件-不有用

-使用setTimeout（）等待2000毫秒以确保加载磁贴-没有用

-使用代理（html2canvas_proxy_php.php）-没有用处

---

-使用google maps idle事件等待地图空闲后再保存-没有用

显然，问题似乎源于

html2canvas

无法呈现css转换，至少在chrome中是如此（我只能在OSX上的chrome中重现这个问题）。使用

-webkit transform

转换保存平铺的容器。因此，我们可以做的是获取容器被移动的值，移除转换，从我们从

transform

得到的值中分配

left

和

top

，然后使用

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

---

我也有同样的问题，但我用传单地图代替谷歌地图

代码如下

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

---

谷歌地图更新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选择器从更改为

.gm style>div:first>div

到

.gm style>div:first>div:first>div:last>div

---

举手在我的例子中，我刚刚在html2Canvas配置中允许跨源资源共享（CORS），它对我有效

useCORS:true,

有关更多信息，请参阅html2Canvas文档：

---

我可能在同一原产地策略中遇到问题。但我不知道为什么这会是零星的。我正在从不同的服务器访问图像和javascript。如果我添加“AllowPaint:true”参数，那么它会保存我的图像贴图层，但不会保存底层的贴图层。在我尝试保存图像之前，我可能需要等待贴图盘加载完图像分幅。向下投票是怎么回事？是因为这个问题是零星的吗？你有没有尝试过拉票2图像？太棒了！我把它也保存在一个新窗口的图像。这个解决方案在Firefox、Chrome和Opera中都可以使用。在Ionic上对我也很有用。你能提供一个JSFIDLE吗。我部分为自己工作。它修剪地图。谢谢。这对mapview有效，知道streetview为什么会损坏吗？@JavaScripter streetview默认使用webgl，然后对html2canvas无法处理的图像进行3d转换。简单的修复方法是将街景模式/渲染设置为

html4

。示例：您好，我有传单地图和wkhtmltopdf的问题，您知道如何解决吗？