鸿蒙开发实践——基于PhotoViewPicker对图片进行操作

场景一：从图库获取图片，并通过image组件显示：

• 创建图库选择器实例，调用select()接口拉起图库界面进行文件选择。文件选择成功后，返回PhotoSelectResult结果集。
• select返回的uri权限是只读权限，可以根据结果集中uri进行读取文件数据操作。
• 根据返回uri创建pixelMap。
• 将pixelMap通过image组件送显。

核心代码：

Image(this.pixelMap).width(200).height(200)
Button('打开相册')
  .onClick(() => {
    //创建图库选择器对象实例
    const photoViewPicker = new picker.PhotoViewPicker();
    //调用select()接口拉起图库界面进行文件选择,文件选择成功后，返回PhotoSelectResult结果集
    photoViewPicker.select().then(async (photoSelectResult: picker.PhotoSelectResult) => {
      //用一个全局变量存储返回的uri
      selectUris = photoSelectResult.photoUris;
      console.info('photoViewPicker.select to file succeed and uris are:' + selectUris);
      //使用fs.openSync接口，通过uri打开这个文件得到fd
      let file = fs.openSync(selectUris[0], fs.OpenMode.READ_ONLY);
      console.info('file fd: ' + file.fd);
      //根据文件fd创建imagSource
      const imageSource: image.ImageSource = image.createImageSource(file.fd);
      //完成后关闭fd
      fs.closeSync(file);
      let decodingOptions: image.DecodingOptions = {
        editable: true,
        desiredPixelFormat: 3,
      }
      //创建pixelMap
      imageSource.createPixelMap(decodingOptions).then(async (pixelMap1: image.PixelMap) => {
        this.pixelMap = pixelMap1;
      });
    }).catch((err: BusinessError) => {
      console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
    })
  })

场景二：对图库获取的图片进行操作：

<