将百度地图截取成图片

可以使用html2canvas,但由于折线、圆、多边形等是使用svg形成的,html2canvas无法识别svg,所以需要先将svg转成canvas。

使用canvg无法将百度地图中的svg转成canvas,会出现一片空白。实际测试时发现删除svg标签上的属性就可以转化成功,但样式会错乱。
可以使用rasterizehtml来进行转化。

import rasterizeHTML from 'rasterizehtml';

 //获取全部的svg
var svgElems =$('#report').find('svg');//report为需要截取成图片的dom的id

svgElems.map(function(index,item){
      //获取svg的父元素
      let parentNode = item.parentNode;

      //获取svg内容及样式
      let svgHTML =  (item.outerHTML || new XMLSerializer().serializeToString(item)).trim();
      let svgStyles = getComputedStyle(item);
      
      //创建canvas元素,并根据svg设置宽
      let canvas = document.createElement('canvas');
      canvas.width = parseInt(svgStyles.width, 10);
      canvas.height = parseInt(svgStyles.height, 10);

      //生成canvas
      rasterizeHTML.drawHTML(svgHTML,canvas);

      //使用canvas代替svg
      parentNode.removeChild(item);
      parentNode.appendChild(canvas)
})

//使用html2canvas截取地图成canvas
 html2canvas(document.getElementById('echartsMapPage3'),{
          useCORS:true,
          allowTaint :true
}).then(function(canvas) {
        document.body.appendChild(canvas);
});
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
把网上电子地图图片下载到本地. 因为网上电子图片是分缩放级别的,可以直接将所有级别或才定制级别的图片下载下来,会放到相应的文件夹里面.可供使用百度地图引擎的程序直接使用. 不好意思,定这么高的分,如果您分不够,可以给我发邮件,我把程序发给您. 双面GetBaiduMapPic\bin\Debug\GetBaiduMapPic.exe来运行程序, 第一步:填写好经度开始,经度结束。 第二步:填写好纬度开始,纬度结束。 第三步:选择缩放级别开始,也就是从第几级的缩放开始下载。 第四步:选择绽放级别结束,也就是到第几级的缩放结束下载。百度的地图缩放是0-13个级别,我们可以从中选择。只要开始不要大于结束即可。 第五步:点击“开始生URL”按钮。此时在下面左边的列表里面会显示出生要下载的图片地址列表。 第六步:点击“选择存储位置”按钮,找到一个位置,用来存放配置文件及要下载的图片的位置。不要忘记文件名处要填写一个名字,自己随意起就好了。填好后点击保存。 第七步:点击“导出XML”按钮,这样便会将刚刚显示的要下载的文件列表保存到了XML文件中。 第八步:点击“开始获取”按钮,便会将百度的电子地图图片下载到本地了。就是您刚才放置XML文件位置。 如果有失败的地址,则点击“失败地址导出XML”,便可以将地址导出。以便重新进行读取下载。 在使用中如果遇到问题可以致 Email:lyx830621@163.com 声明:本程序只用作技术研究,软件使用自愿,若引起百度等网站纠纷与本人无关,请自行决定是否使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值