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

📚往期学习笔录📝：

📝 鸿蒙（HarmonyOS）北向开发知识点记录~
📝 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
📝 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
📝 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
📝 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
📝 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
📝 记录一场鸿蒙开发岗位面试经历~
📝 持续更新中……

场景描述

用户有时需要分享或保存图片、视频等用户文件，开发者可以通过系统预置的 文件选择器（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