Mapbox GL JS 在前端生成缩略图

前端加油站

已于 2023-06-02 16:43:50 修改

阅读量450

点赞数

分类专栏： mapBox地图文章标签：截图缩略图地图截图

于 2023-03-21 14:19:13 首次发布

本文链接：https://blog.csdn.net/Gas_station/article/details/129687629

版权

mapBox地图专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章介绍了如何在JavaScript中通过map.getCanvas().toBlob()方法代替toDataURL来获取地图的缩略图base64数据，从而实现更高效的图片处理。在业务代码中，该方法被封装在一个Promise中，并在地图加载完成后调用，用于上传图片。

摘要由CSDN通过智能技术生成

*如果可以实现记得点赞分享，谢谢老铁～*

第一步，在工具类中写一个方法，使用 map.getCanvas().toDataURL() 方法获取缩略图的 base64 数据。但本文中采用更轻巧的canvas.toBlob() 来实现。

/**
 * 截取地图生成base64地址的图片
 * @param map 
 */
export const screenshot = (map: any) => {
  return new Promise((resolve) => {
    // 获取地图 canvas 元素
    const canvas = map.getCanvas();
    // 设置要导出的图像分辨率和转换格式
    let format = 'png'; // 您也可以选择使用 jpeg
    let quality = 0.9; // 图像质量，值在 0~1 之间
    // let resolution = 2;// 2 倍的分辨率 
    // let dataURI = canvas.toDataURL('image/' + format, quality);  ps:  弃用
    // 生成的Base64图片将比使用toDataURL方法生成的小得多，并且可以方便地在浏览器中显示和处理。
    canvas.toBlob((blob: any) => {
        const reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = () => {
          const base64data = reader.result;
          resolve(base64data);
        }
    }, 'image/jpeg');
  });
}

第二步，在业务代码中引入screenshot此方法。方法包装在初始化 map 对象后 map?.once(‘idle’)中使用，如下：

// 等待加载完成后再获取画布数据
map?.current?.once('idle', () => {
  const flag = Number(routeParams?.status) !== 0
  getResultImg(flag)
});

//获取地图img
const getResultImg = (flag: boolean) => {
  // canvas截图后的base64
  screenshot(map.current).then((base64Url: any)=>{
    if(base64Url){
      uploadImg({ imgUrl: base64Url}); //todo
    }
  })
}