HarmonyOS 鸿蒙Next可可图片编辑中选择图片和保存到图库

可可图片编辑 HarmonyOS（2） 选择图片和保存到图库

前言

HarmonyOS 上架应用 可可图片编辑 APP中，大量使用到了读取相册图片和保存图片到图库的功能。这篇文章主要围绕这两个核心功能继续讲解，目前HarmonyOS 应用开发中 主要推荐使用Picker读取媒体库的图片与视频。使用保存控件/授权弹窗保存媒体库的图片与视频。

picker 选择图片

Picker 可以实现直接选择图库图片或者拍照的方式获取图片，需要注意的是 使用 Picker 读取图片时，返回的该图片的uri信息。Picker读取图片。

1. 导入模块 photoAccessHelper 模块

import { photoAccessHelper } from '@kit.MediaLibraryKit';

import { BusinessError } from '@kit.BasicServicesKit';

photoAccessHelper 来自于 MediaLibraryKit，MediaLibraryKit（媒体文件管理服务）提供了管理相册和媒体文件的能力，包括图片和视频，帮助应用快速构建图片和视频的展示与播放功能。

2. 设置选择图片的参数

PhotoSelectOptions继承自BaseSelectOptions。

BaseSelectOptions提供的配置主要有：

而 PhotoSelectOptions 提供的配置有：

以下示例代码中主要使用了 MIMEType 和 maxSelectNumber

const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();

photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGE。

photoSelectOptions.maxSelectNumber = 5; // 选择媒体文件的最大数目。

3. 创建图片选择器

// 3 创建图片选择器

const photoViewPicker = new photoAccessHelper.PhotoViewPicker();

4. 开始选择图片

  // 4 开始选择图片

  photoViewPicker.select(photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {

    uris = photoSelectResult.photoUris;

    console.info('photoViewPicker.select to file succeed and uris are:' + uris);

  }).catch((err: BusinessError) => {

    console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);

  })

5. 打印输出

photoViewPicker.select to file succeed and uris are:file://media/Photo/1/IMG_1756079725_000/screenshot_20250825_075345.jpg

完整代码

// 1 导入模块 photoAccessHelper 模块

import { photoAccessHelper } from '@kit.MediaLibraryKit';

import { BusinessError } from '@kit.BasicServicesKit';

@ComponentV2

@Entry

struct Index {

  build() {

    Column({ space: 10 }) {

      Button("选择图片")

        .onClick(() => {

          // 2 设置选择图片的参数

          const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();

          photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGE。

          photoSelectOptions.maxSelectNumber = 5; // 选择媒体文件的最大数目。

          let uris: Array<string> = [];

          // 3 创建图片选择器

          const photoViewPicker = new photoAccessHelper.PhotoViewPicker();

          // 4 开始选择图片

          photoViewPicker.select(photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {

            uris = photoSelectResult.photoUris;

            console.info('photoViewPicker.select to file succeed and uris are:' + uris);

          }).catch((err: BusinessError) => {

            console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);

          })

        })

    }

    .width("100%")

    .height("100%")

    .justifyContent(FlexAlign.Center)

  }

}

SaveButton 安全控件 保存图片

应用可以通过安全控件或授权弹窗的方式，将用户指定的媒体资源保存到图库中。授权弹窗的方式需要另外设置权限和向用户申请权限，如果安全控件可以满足我们的需求，建议直接使用安全控件的方式。

使用安全控件的主要流程如下：

1. 设置安全控件的基本样式

如果安全控件的基本样式不清晰、明了，那么系统就会拒绝授权给你保存图片，这个务必要注意。

安全控件的保存控件。用户点击保存控件，应用可以临时获取存储权限，而不需要权限弹框授权确认。

为避免控件样式不合法导致授权失败，请开发者先了解安全控件样式的约束与限制。

可能会导致授权失败的问题（包括但不限于）：

• 字体、图标尺寸过小。
• 安全控件整体尺寸过大。
• 字体、图标、背景按钮的颜色透明度过高。
• 字体或图标与背景按钮颜色过于相似。
• 安全控件超出屏幕、超出窗口等，导致显示不全。
• 安全控件被其他组件或窗口遮挡。
• 安全控件的父组件有类似变形模糊等可能导致安全控件显示不完整的属性。

     SaveButton({

        text: SaveDescription.SAVE_IMAGE,

        icon: SaveIconStyle.FULL_FILLED

      })

2. 使用 phAccessHelper得到存图库中的路径

createAsset：指定文件类型、后缀和创建选项，创建图片或视频资源

      SaveButton({

        text: SaveDescription.SAVE_IMAGE,

        icon: SaveIconStyle.FULL_FILLED

      })

        .onClick(async (event, result: SaveButtonOnClickResult) => {

          if (result == SaveButtonOnClickResult.SUCCESS) {

            try { // 获取相册访问助手

              const phAccessHelper = photoAccessHelper.getPhotoAccessHelper(getContext());

              // 创建图片资源

              const createOptions: photoAccessHelper.CreateOptions = {

                subtype: photoAccessHelper.PhotoSubtype.DEFAULT

              };

              const uri =

                await phAccessHelper.createAsset(photoAccessHelper.PhotoType.IMAGE, this.fileUrl.split('.').pop(),

                  createOptions)

            

            } catch (e) {

              console.log("保存失败", e.message)

            }

          }

        })

3. 读取要保存图片的源数据

这里需要传入Picker选择的图片的具体路径 this.fileUri

          // 4 开始选择图片

          photoViewPicker.select(photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {

            uris = photoSelectResult.photoUris