Mapbox GL JS 在前端生成缩略图

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

第一步，在工具类中写一个方法，使用 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
    }
  })
}