javascript – html2canvas不适用于Google Maps Pan

2019-09-17 22:33:44 阅读：174 来源： 互联网

标签：html2canvas javascript google-maps

我正在使用html2canvas将我的online map保存为图像(请参阅另存为图像链接).我在Firefox,Chrome和Opera中尝试过它.

如果您不更改默认地图,它往往会更频繁地工作.如果缩放然后平移地图,则不太可能工作.地图将平移,但html2canvas将使用旧的中心点和地图边界.并且html2canvas将无法加载新地图边界的地图图块.

地图平移正确,但html2canvas使用旧的中心点和地图边界.为什么是这样？

为了支持从不同的域获取图像,我有以下设置：

useCors: true;

我尝试了以下解决方案

– 手动更改地图类型.有时这会修复它.

– 触发浏览器调整大小事件 – 没用.

– 使用setTimeout()等待2000毫秒以确保加载切片 – 没用

– 使用代理(html2canvas_proxy_php.php) – 没用

– 使用谷歌地图空闲事件等待地图在保存前闲置 – 没用

解决方法:

显然,问题似乎源于html2canvas无法渲染css变换,至少在chrome中(我只能在Chrome上重现问题,在OSX上).保存切片的容器使用-webkit-transform进行转换.所以我们可以做的是获取容器移动的值,删除变换,从我们得到的变换值中分配左和上,然后使用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
    })
  }
});

标签：html2canvas,javascript,google-maps
来源： https://codeday.me/bug/20190917/1810065.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – html2canvas不适用于Google Maps Pan