OpenHarmony实战开发-如何获取用户图库中的图片并显示在应用界面中。

场景说明

拉起用户图库，选择图片并上传显示在应用界面中是比较常见的场景，比如上传用户头像、将图片上传社交平台、购物应用中上传图片评价等等。本文以上传用户头像为例介绍如何获取用户图库中的图片并显示在应用界面中。

效果呈现

本例最终效果图如下。

效果说明：点击头像处的相机，拉起用户图库，选择要上传的图片，点击上传，头像随即更新为上传后的图片。

环境要求

本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：

• IDE: DevEco Studio 4.0 Release
• SDK: Ohos_sdk_public 4.0.10.13 (APIVersion 10 Release)

实现思路

本例的包含的关键操作及其实现方案如下：

• 拉起用户图库选择图片：使用图片类用户文件选择器PhotoViewPicker拉起用户图库并选择图片，与此同时获取到选中图片的uri。由于图库中图片属于系统资源，可被其他程序删除，修改，最终造成图库中uri路径失效，因此通常是将获取的图片资源推送至应用沙箱中指定路径或上传应用服务器中。本文采用选择图库图片后将图片拷贝至应用沙箱中指定路径中。
• 获取图片在应用沙箱中的uri后，可通过Image组件对图片进行显示，Image组件支持加载PixelMap、ResourceStr和DrawableDescriptor类型的数据源，支持png、jpg、bmp、svg和gif类型的图片格式。
• 对于用户头像应用场景下，部分应用可能需要支持对图片进行优化，编辑等（本例中不做详细介绍，具体操作请查阅官方文档中图片处理章节），因此本例中将获取的图片转换为PixelMap类型，用于Image组件展示。本例通过图片的uri获取到图片文件的fd（文件描述符），再使用createImageSource和createPixelMap方法将fd转换为pixelmap。

开发步骤

本例详细开发步骤如下，开发步骤中仅展示相关步骤代码，全量代码请参考完整代码章节的内容。

1.使用PhotoViewPicker拉起用户图库选择图片，并获取到图片的uri，然后将被选择图片拷贝到应用沙箱中的指定位置，获取沙箱中的uri。

// 定义一个函数用于点击头像时拉起用户图库
async pickProfile() {
   
  const photoSelectOptions = new picker.PhotoSelectOptions();
  // 设置选择的文件类型为图片类型
  photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
  // 一次只能选择一张图片
  photoSelectOptions.maxSelectNumber = 1;
  const photoViewPicker = new picker.PhotoViewPicker();
  // 拉起图库，获取选中图片的uri,并将选择图片拷贝至应用沙箱指定位置
  await photoViewPicker.select(photoSelectOptions)
    .then((photoSelectResult: picker.PhotoSelectResult) => {
   
      // 获取选中图片的uri
      let imageUri = photoSelectResult.photoUris[0];
      console.info('photoViewPicker.select to file succeed and uris are:' + imageUri);
      let context = getContext()
      //获取应用通用文件路径
      let filesDir = context.filesDir
      let fileName = "userProfileImage"
      //获取沙箱中文件路径
      let path = filesDir + "/" + fileName + "." + imageUri.split(".")[1]
      let file = fs.openSync(imageUri, fs.OpenMode.READ_ONLY)
      let file2 = fs.openSync(path, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE)
      //完成图片拷贝
      fs.copyFileSync(file.fd, file2.fd)
      fs.closeSync(file.fd)
      fs.closeSync(file2.fd)
      //获取图片沙箱路径对应的uri
      this.uri = fileUri.getUriFromPath(path)
      //获取图片对应的PixelMap
      this.getPixelMap()
    })
    .catch((err: BusinessError) => {