微信小程序保存图片到相册

435 字

2 分钟

微信小程序保存图片到相册

2020-12-17

小程序

/

前端

/

Taro

在开发过程中经常遇到保存图片到相册的需求，主要有两种一是保存服务器地址图片，还有一种是保存 canvas 生成的 base64 格式图片，下面来讲解分别怎么实现。

保存服务器地址图片到相册#

1
// 查看是否有 `scope.writePhotosAlbum` 权限
2
wx.getSetting({
3
  success: (res) => {
4
    if (!res.authSetting["scope.writePhotosAlbum"]) {
5
      // 申请所需权限
6
      wx.authorize({
7
        scope: "scope.writePhotosAlbum",
8
        success: () => {
9
          // 授权成功保存图片
10
          saveToAlbum();
11
        },
12
        fail: () => {
13
          // 授权失败
14
        },
15
      });
16
    } else {
17
      // 用户到设置中同意保存相册权限后再次保存到相册
18
      saveToAlbum();
19
    }
20
  },
21
});
22

23
// 保存图片到相册
24
function saveToAlbum() {
25
  // 下载图片资源到本地
26
  wx.downloadFile({
27
    url: imgUrl,
28
    success: function (res) {
29
      // 保存图片到相册
30
      wx.saveImageToPhotosAlbum({
31
        filePath: res.tempFilePath,
32
        success(res) {
33
          // 保存成功
34
        },
35
        fail: () => {
36
          // 保存失败
37
        },
38
      });
39
    },
40
    fail: () => {
41
      // 下载失败
42
    },
43
  });
44
}

保存 base64 格式图片到相册#

1
// 查看是否有 `scope.writePhotosAlbum` 权限
2
wx.getSetting({
3
  success: (res) => {
4
    if (!res.authSetting["scope.writePhotosAlbum"]) {
5
      // 申请所需权限
6
      wx.authorize({
7
        scope: "scope.writePhotosAlbum",
8
        success: () => {
9
          // 授权成功保存图片
10
          saveToAlbum();
11
        },
12
        fail: () => {
13
          // 授权失败
14
        },
15
      });
16
    } else {
17
      // 用户到设置中同意保存相册权限后再次保存到相册
18
      saveToAlbum();
19
    }
20
  },
21
});
22

23
// 保存图片到相册
24
function saveToAlbum() {
25
  // 把base64的图片转化成ArrayBuffer数据
26
  const buffer = wx.base64ToArrayBuffer(
27
    img.replace(/^data:\w+\/\w+;base64,/, "")
28
  );
29
  // 指定图片的临时路径
30
  const path = `${wx.env.USER_DATA_PATH}/image_name.png`;
31
  // 获取小程序的文件系统
32
  const fsm = wx.getFileSystemManager();
33
  // 把arraybuffer数据写入到临时目录中
34
  fsm.writeFile({
35
    filePath: path,
36
    data: params,
37
    encoding: "binary",
38
    success: () => {
39
      // 把临时路径下的图片，保存至相册
40
      wx.saveImageToPhotosAlbum({
41
        filePath: path,
42
        success: () => {
43
          // 保存成功
44
        },
45
        fail: () => {
46
          // 保存失败
47
        },
48
      });
49
    },
50
    fail: () => {
51
      // 写入失败
52
    },
53
  });
54
}