实现文件图片管理功能鸿蒙示例代码

鸿蒙场景化示例代码技术工程师

发布于 2025-4-3 10:06

805浏览

0收藏

本文原创发布在华为开发者社区。

介绍

本示例基于媒体文件管理服务，实现了管理相册、照片和视频的功能。图片管理对图片像素数据进行解析、处理、构造的过程，达到目标图片效果，主要涉及图片解码、图片处理、图片编码等。

实现文件图片管理功能源码链接

效果预览

实现文件图片管理功能鸿蒙示例代码-鸿蒙开发者社区

使用说明

如果在运行该示例代码时，出现运行不了的情况，可尝试选择DevEco Studio菜单栏Build里面的Clean Project选项，来清理工程。

实现思路

try拉起文件/图片选择

    let photoSelectResult = await photoPicker.select(photoSelectOptions);        // 拉起图片选择框
    if (photoSelectResult && photoSelectResult.photoUris && photoSelectResult.photoUris.length > 0) {
      let imgUris = photoSelectResult.photoUris;
      for (let imgUri of imgUris) {
        if (imgUri.indexOf('media/Photo')<0) {
          promptAction.showToast({message: '请选择图片进行上传'})
          return [];
        }
      }
      return imgUris;
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

保存图像

  async savePhotoToGallery(context: common.UIAbilityContext) {
    let helper = photoAccessHelper.getPhotoAccessHelper(context);
    try {
      // onClick触发后5秒内通过createAsset接口创建图片文件，5秒后createAsset权限收回。
      let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg');
      // 使用uri打开文件，可以持续写入内容，写入过程不受时间限制
      let file = await fileIo.open(uri, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
      const arrayBuffer = await context.resourceManager.getMediaContent($r('app.media.startIcon').id, 0)
      // 往打开的文件写入 arrayBuffer
      fileIo.writeSync(file.fd, arrayBuffer.buffer)
      // 写完后，主动关闭文件
      await fileIo.close(file.fd)
      promptAction.showToast({ message: '已保存至相册！' });
    } catch (error) {
      const err: BusinessError = error as BusinessError;
      console.error(`Failed to save photo. Code is ${err.code}, message is ${err.message}`);
    }
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.