HarmonyOS NEXT鸿蒙中选择相册的一张图片并展示到界面

核心API    HarmonyOS NEXT

photoAccessHelper.PhotoViewPicker()

应用场景

在很多时候，我们都会在应用中用到系统相册选择功能，可能选择一张或多张图片，用于不同的业务功能。那么我们怎么唤起图片选择界面呢？这里就要用到photoAccessHelper。

打开相册

我们使用photoAccessHelper中的PhotoSelectOptions先创建一个图片参数类型，给图片选择制定规则，然后创建图片选择器，传入选择图片的规则，会返回一个图片的路径数组。我们先打印出来。

Button('选则一张图片')
   .onClick(async () => {
   // 1. 打开相册选一张图
   // 选择图片的参数
   const options = new photoAccessHelper.PhotoSelectOptions()
   // 指定文件类型是图片
   options.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE
   // 选择一张图
   options.maxSelectNumber = 1
   // 创建相册选择器
   const picker = new photoAccessHelper.PhotoViewPicker()
   // 去选图片
   const selectResult = await picker.select(options)
   // 得到选择图片的 uri 完整路径
   const uri = selectResult.photoUris[0]
   promptAction.showToast({ message: uri })
})

 点击打开图片选择，选择完成后就会打印出图片的uri路径

将图片转换为buffer数据流

当我们得到图片的具体uri路径的时候，我们需要先把图片转为buffer数据流

// 2. 图片转换为 buffer
          // 以只读的方式根据路径打开文件
          const file = fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY)
          // 获取 文件大小
          const photoSize = fileIo.statSync(file.fd).size
          // 创建一个 buffer
          const buffer = new ArrayBuffer(photoSize)
          // 读取文件
          fileIo.readSync(file.fd, buffer)
          // 关闭文件
          fileIo.closeSync(file)

将buffer数据流转化为图像数据PixelMap

接收一个buffer调用createPixelMap生成图片数据

 // 将 buffer 转换为 PixelMap
          const imageSource = image.createImageSource(buffer);
          // 创建 PixelMap
          const pixel = await imageSource.createPixelMap({});

完整写法

直接复制到页面可用，无需权限配置

import { photoAccessHelper } from '@kit.MediaLibraryKit'
import { promptAction } from '@kit.ArkUI'
import { fileIo } from '@kit.CoreFileKit'
import { image } from '@kit.ImageKit'

@Entry
@Component
struct Test {
  @State pixel: image.PixelMap | undefined = undefined;

  build() {
    Column() {
      Image(this.pixel)
        .width(200)
        .height(200)
        .margin({ bottom: 20 })
      Button('选则一张图片')
        .onClick(async () => {
          // 1. 打开相册选一张图
          // 选择图片的参数
          const options = new photoAccessHelper.PhotoSelectOptions()
          // 指定文件类型是图片
          options.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE
          // 选择一张图
          options.maxSelectNumber = 1
          // 创建相册选择器
          const picker = new photoAccessHelper.PhotoViewPicker()
          // 去选图片
          const selectResult = await picker.select(options)
          // 得到选择图片的 uri 完整路径
          const uri = selectResult.photoUris[0]
          promptAction.showToast({ message: uri })

          // 2. 图片转换为 buffer
          // 以只读的方式根据路径打开文件
          const file = fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY)
          // 获取 文件大小
          const photoSize = fileIo.statSync(file.fd).size
          // 创建一个 buffer
          const buffer = new ArrayBuffer(photoSize)
          // 读取文件
          fileIo.readSync(file.fd, buffer)
          // 关闭文件
          fileIo.closeSync(file)

          // 将 buffer 转换为 PixelMap
          const imageSource = image.createImageSource(buffer);
          // 创建 PixelMap
          this.pixel = await imageSource.createPixelMap({});
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}