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

场景描述

用户有时需要分享或保存图片、视频等用户文件，开发者可以通过系统预置的 文件选择器（FilePicker） ，实现该能力。通过Picker访问相关文件，将拉起对应的应用，引导用户完成界面操作，接口本身无需申请权限。 PhotoViewPicker ：适用于图片或视频类型文件的选择与保存。优选使用 PhotoAccessHelper的PhotoViewPicker 来选择文件。当前PhotoViewPicker对接的选择资源来自于图库，保存位置为系统文件管理器的特定目录，因此使用save接口保存的图片或视频无法在图库中展示。如需在图库中展示，请使用 安全控件创建媒体资源 。

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

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

• 场景三：保存图片

方案描述

场景一：从图库获取图片，并通过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);