uniapp如何保存图片到本地

在uniapp中如何将网络图片或canvas生成的图片保存到本地相册？需要调用哪个API，是否需要处理权限问题？希望能提供一个完整的代码示例，包括iOS和Android的兼容性处理。

2 回复

使用uni.saveImageToPhotosAlbum方法，将网络图片或临时路径图片保存到相册。需要先获取相册权限，并处理用户拒绝的情况。


在 UniApp 中，保存图片到本地可以通过以下步骤实现，主要使用 uni.downloadFile 下载图片到临时路径，然后通过 uni.saveImageToPhotosAlbum 保存到相册。以下是详细说明和代码示例：

步骤：

  1. 下载图片：使用 uni.downloadFile 将网络图片下载到临时路径。
  2. 保存到相册：使用 uni.saveImageToPhotosAlbum 将临时图片保存到设备相册。
  3. 权限处理：在部分平台（如 Android）可能需要动态申请相册写入权限。

代码示例：

// 假设图片URL为网络地址
const imageUrl = 'https://example.com/image.jpg';

// 1. 下载图片到临时路径
uni.downloadFile({
  url: imageUrl,
  success: (res) => {
    if (res.statusCode === 200) {
      // 2. 保存到相册
      uni.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: () => {
          uni.showToast({ title: '保存成功', icon: 'success' });
        },
        fail: (err) => {
          console.error('保存失败:', err);
          uni.showToast({ title: '保存失败', icon: 'none' });
        }
      });
    }
  },
  fail: (error) => {
    console.error('下载失败:', error);
    uni.showToast({ title: '下载图片失败', icon: 'none' });
  }
});

注意事项：

  • 权限申请：在 Android 平台，如果保存失败，可能需要动态申请 WRITE_EXTERNAL_STORAGE 权限。可以使用 uni.authorize 提前请求权限。
  • 本地图片：如果图片已是本地路径（如通过 uni.chooseImage 选择），可直接使用 uni.saveImageToPhotosAlbum 保存。
  • 用户提示：保存操作涉及用户隐私，建议在保存前通过 uni.showModal 提示用户。

权限处理示例（如果需要）：

// 在保存前申请权限（仅 Android 需要）
uni.authorize({
  scope: 'scope.writePhotosAlbum',
  success: () => {
    // 授权成功，执行保存操作
    saveImage();
  },
  fail: () => {
    uni.showToast({ title: '无相册权限', icon: 'none' });
  }
});

通过以上方法，即可在 UniApp 中实现图片保存功能。如果遇到问题，检查网络连接、图片URL有效性及平台权限设置。

回到顶部