天地图截屏功能

咸鱼起码是条鱼

已于 2023-05-09 10:36:11 修改

阅读量2.2k

点赞数 5

分类专栏：天地图文章标签： javascript js vue

于 2021-11-24 11:10:29 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44063746/article/details/121510836

版权

天地图专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何利用dom-to-image库解决使用天地图API绘制地图后，通过html2canvas截图出现覆盖物漂移的问题。通过详细步骤，展示了如何正确截取并保存地图为本地PNG图片，包括获取截屏元素、转换为PNG、创建并触发下载链接的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近有个需求是把我用天地图api绘制轮廓、图层等截屏保存到本地

1.首先自然想到的是html2canvas，但是截屏后发现，我绘制的覆盖物出现了漂移
2.最后采用了dom-to-image，完美解决
步骤：
npm install dom-to-image
import domtoimage from ‘dom-to-image’;

// 截屏方法
screenShot() {
	//1.获取你要截屏的元素
  domtoimage.toPng(document.querySelector("#mapDiv"))
    .then(dataUrl => {
    //2.结果会返回base64格式，然后创建a标签，赋值到href
      var reader = dataUrl;
      var a = document.createElement("a");
      a.download = "截屏.png";//这里你可以对截屏后的图片名自定义修改，例如时间
      a.href = reader;
      document.querySelector("body").appendChild(a);
      //3.触发a标签，最后再移除，实现重复截屏
      a.click();
      document.querySelector("body").removeChild(a);
    })
    .catch(function(error) {
      console.error("失败:", error);
    });
}