HarmonyOS鸿蒙Next中用户个人中心自定义头像时如何实现打开相册选图片功能

HarmonyOS鸿蒙Next中用户个人中心自定义头像时如何实现打开相册选图片功能

问题描述：鸿蒙Next如何实现打开相册选图片功能

应用场景：用户个人中心自定义头像的时候，需要选择相册上传照片。

3 回复

解决方案：

使用picker这个API实现从系统上获取相册图片这个点的，

1、首先要实例一个选择参数PhotoSelectOptions 里面需要设置媒体文件类型还有一个数量

2、然后->实例一个选择器PhotoViewPicker，

3、通过自带的——>select方法传入先前设置的选择参数即可完成选择并获取到选择图片的文件路径

4、解析文件路径转为PixelMap格式或者base64格式

5、再对接后端接口上传数据

// 导入选择器模块和文件管理模块
import {  zipImageUtil} from '../utils/ZipImageUtil'
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { image } from '@kit.ImageKit';
import { fileIo as fs } from '@kit.CoreFileKit';
import {  buffer as Buffer} from '@kit.ArkTS';
 // 拉起相册，选择图片方法
class getPhotofromAlbum{
    getAlbum: string = '显示相册中的图片';
    pixel: image.PixelMap | undefined = undefined;
    albumPath: string = '';
    photoSize: number = 0;
    async initData():Promise<string>{
        try{
        //创建图片-音频类型文件选择选项实例
        let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions(); 
        PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
        PhotoSelectOptions.maxSelectNumber = 1; // 最多选择数量
       
        //创建图库选择器实例，调用PhotoViewPicker.select接口拉起图库界面进行文件选择。文件选择成功后，返回PhotoSelectResult结果集。
       let photoPicker = new photoAccessHelper.PhotoViewPicker(); 
      let photoSelectResult: photoAccessHelper.PhotoSelectResult = await photoPicker.select(PhotoSelectOptions);
        this.albumPath = photoSelectResult.photoUris[0];  //获得到选择图片的文件路径

        // 使用file解析文件，并读取图片为buffer
       const file = fs.openSync(this.albumPath, fs.OpenMode.READ_ONLY);
       this.photoSize = fs.statSync(file.fd).size;
       console.info('Photo Size: ' + this.photoSize);
       let buffer = new ArrayBuffer(this.photoSize);
       fs.readSync(file.fd, buffer);
       fs.closeSync(file);

        // 解码成PixelMap
       const imageSource = image.createImageSource(buffer);
       console.log('imageSource: ' + JSON.stringify(imageSource));
       let pixelMap = await imageSource.createPixelMap({});

       //设置打包参数
       const imagePackerApi = image.createImagePacker();
       const packOpts: image.PackingOption = { format: "image/jpeg", quality: 100 };
       let imageBuffer: ArrayBuffer = new ArrayBuffer(1);
       // 图片压缩或重新打包
       imageBuffer = await imagePackerApi.packing(imageSource, packOpts);
       imageBuffer = await zipImageUtil.packingImage(imageBuffer, pixelMap, 100, 500*1024); //压缩到500kb
       console.log('压缩后的字节长度：'+imageBuffer.byteLength/1024)

        //转成base64地址
        let base64Str:string = Buffer.from(imageBuffer).toString('base64')
        return base64Str

        }catch(e){
            throw new Error(`相册 获取照片失败 ： ${JSON.stringify(e)}`);
        }


    }

}

更多关于HarmonyOS鸿蒙Next中用户个人中心自定义头像时如何实现打开相册选图片功能的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，实现打开相册选择头像功能，需要使用@ohos.file.picker和@ohos.file.uri模块。主要步骤为：创建PhotoViewPicker实例，调用select()方法拉起系统相册界面。用户选择图片后，通过返回的PhotoSelectResult获取文件URI。然后，可以使用Image组件显示该URI，或使用fs模块处理文件数据。注意在module.json5中申请ohos.permission.READ_IMAGEVIDEO权限。

在HarmonyOS Next中，实现从相册选择图片用于自定义头像，核心是使用系统提供的**PhotoPicker（图片选择器）**能力。这是HarmonyOS Next推荐的标准方式，它提供了安全、统一的系统级图片选择界面。

以下是实现此功能的关键步骤和代码示例：

1. 配置权限

首先，在module.json5文件的module字段下声明必要的权限：

"requestPermissions": [
  {
    "name": "ohos.permission.READ_IMAGE"
  }
]

用户首次使用该功能时，系统会弹出授权弹窗。

2. 导入模块

在需要使用的.ets文件中导入相关模块：

import picker from '@ohos.file.picker';
import common from '@ohos.app.ability.common';

3. 调用PhotoPicker选择图片

创建一个函数（例如在头像点击事件中调用）来启动图片选择器：

async onSelectAvatar() {
  try {
    // 1. 创建PhotoPicker实例
    const photoPicker = new picker.PhotoViewPicker();

    // 2. 配置选择选项：这里设置为选择单张图片（MIME类型为图像）
    const options: picker.PhotoSelectOptions = {
      selectCount: 1, // 选择数量为1
      MIMEType: picker.PhotoViewMIMETypes.IMAGE_TYPE, // 限定为图片类型
    };

    // 3. 启动选择器并等待用户选择结果
    const result: picker.PhotoSelectResult = await photoPicker.select(options);

    // 4. 处理返回结果
    if (result && result.photoUris && result.photoUris.length > 0) {
      const selectedImageUri: string = result.photoUris[0]; // 获取第一张选中图片的URI
      // 此处可以将 selectedImageUri 赋值给头像Image组件的src属性，实现预览
      // 例如：this.avatarSrc = selectedImageUri;
      // 如果需要上传，可以进一步使用此URI读取文件数据。
    }
  } catch (err) {
    // 处理错误，例如用户取消选择或权限不足
    console.error(`Failed to select photo. Code: ${err.code}, message: ${err.message}`);
  }
}

4. 在UI中展示与触发

在UI的.ets文件中，通常这样绑定：

// 头像图片组件，点击触发选择
Image(this.avatarSrc) // avatarSrc 是存储图片URI的状态变量
  .onClick(() => {
    this.onSelectAvatar();
  })
  .width(100)
  .height(100)
  .borderRadius(50) // 圆形头像

关键点说明：

  • PhotoPicker：是系统级组件，用户界面和交互由系统保障，应用无需自行开发相册界面。
  • URI：返回的是图片的临时访问URI（'file://...'格式），应用可以直接用它来显示。如果应用需要永久存储此图片，需要将其复制到应用沙箱路径下。
  • 权限：READ_IMAGE权限允许应用读取用户选择的图片数据。
  • 错误处理：务必用try...catch包裹，以妥善处理用户取消选择等场景。

通过以上步骤，即可在HarmonyOS Next应用中实现标准的“从相册选择图片”功能，用于头像设置等场景。

回到顶部