【HarmonyOS实战开发】基于PhotoViewPicker对图片进行操作

于 2024-08-22 14:23:23 发布
阅读量593 收藏 17
点赞数 8
分类专栏： 前端 鸿蒙 安卓 文章标签： harmonyos 华为 鸿蒙 安卓 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HarmonyOS007/article/details/141427208
版权
前端 同时被 3 个专栏收录
213 篇文章 0 订阅
订阅专栏
鸿蒙
213 篇文章 2 订阅
订阅专栏
安卓
213 篇文章 0 订阅
订阅专栏

场景描述

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

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

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

场景三：保存图片

方案描述

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

效果图
image.png

image.png

方案

  1. 创建图库选择器实例，调用select()接口拉起图库界面进行文件选择。文件选择成功后，返回PhotoSelectResult结果集。
  2. select返回的uri权限是只读权限，可以根据结果集中uri进行读取文件数据操作。
  3. 根据返回uri创建pixelMap
  4. 将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}`);

            })

          })

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

效果图

image.png

方案

  • 调用pixelMap的 rotate方法实现对图面的旋转
  • 通过imagePacker的api实现图片编码压缩

核心代码

  Button("图片操作")

          .margin({ top: 20 })

          .onClick(async (event: ClickEvent) => {

            if (this.pixelMap) {

              //旋转90度

              await this.pixelMap.rotate(90);

              //创建图像编码ImagePacker对象。

              const imagePackerApi = image.createImagePacker();

              //设置编码输出流和编码参数。

              // format为图像的编码格式；quality为图像质量，范围从0-100，100为最佳质量。

              let packOpts: image.PackingOption = { format: "image/jpeg", quality: 100 };

              //通过PixelMap进行编码

              imagePackerApi.packing(this.pixelMap, packOpts).then(async (data: ArrayBuffer) => {

                // data 为打包获取到的文件流，写入文件保存即可得到一张图片

                arrayBuffer = data;

              }).catch((error: BusinessError) => {

                console.error('Failed to pack the image. And the error is: ' + error);

              })

            }

          })

场景三：保存图片

方案一：通过photoViewPicker****将图片保存到系统文件管理器管理特定目录

当前所有picker的save接口都是用户可感知的，具体行为是拉起FilePicker, 将文件保存在系统文件管理器管理的特定目录，与图库管理的资源隔离，无法在图库中看到。

效果图

image.png

    1. 调用save()接口拉起FilePicker界面进行文件保存。用户选择目标文件夹，用户选择与文件类型相对应的文件夹，即可完成文件保存操作。保存成功后，并用一个全局变量存储返回的uri。
    2. 使用fs.openSync接口，通过选择和保存uri打开这两个文件得到fd，这里需要注意接口权限参数分别是fs.OpenMode.READ_ONLY和fs.OpenMode.WRITE_ONLY。再调用fs.copyFileSync接口进行复制，修改完成后关闭两个文件。

核心代码

try {

              const photoSaveOptions = new picker.PhotoSaveOptions(); // 创建文件管理器保存选项实例

              photoSaveOptions.newFileNames = ["PhotoViewPicker01.png"]; // 保存文件名（可选），方括号里的文件名自定义，每次不能重复，设备里已有这个文件的话，名字就需要改个不一样的，不然接口会报错

              const photoViewPicker = new picker.PhotoViewPicker();

              try {

                //调用save()接口拉起FilePicker界面进行文件保存。用户选择目标文件夹，用户选择与文件类型相对应的文件夹，即可完成文件保存操作

                let photoSaveResult = await photoViewPicker.save(photoSaveOptions);

                if (photoSaveResult != undefined) {

                  //保存成功后，并用一个全局变量存储返回的uri

                  saveUris = photoSaveResult;

                  console.info('photoViewPicker.save to file succeed and uris are:' + photoSaveResult);

                }

              } catch (error) {

                let err: BusinessError = error as BusinessError;

                console.error(`[picker] Invoke photoViewPicker.save failed, code is ${err.code}, message is ${err.message}`);

              }

            } catch (error) {

              let err: BusinessError = error as BusinessError;

              console.info("[picker] photoViewPickerSave error = " + JSON.stringify(err));

            }

 try {

              //使用fs.openSync接口，通过选择和保存uri打开这两个文件得到fd，这里需要注意接口权限参数分别是fs.OpenMode.READ_ONLY和fs.OpenMode.WRITE_ONLY

              let photoSelect = fs.openSync(selectUris[0], fs.OpenMode.READ_ONLY);

              let photoSave = fs.openSync(saveUris[0], fs.OpenMode.WRITE_ONLY);

              //再调用fs.copyFileSync接口进行复制

              fs.copyFileSync(photoSelect.fd, photoSave.fd);

              //完成后关闭两个文件。

              fs.close(photoSelect);

              fs.close(photoSave);

            } catch (error) {

              let err: BusinessError = error as BusinessError;

              console.info("[picker] Photo Save error = " + JSON.stringify(err));

            }

          })

方案二：通过安全控件按钮保存图片到图库

保存控件是一种特殊的安全控件，它允许用户通过点击按钮临时获取存储权限，而无需通过权限弹框进行授权确认

集成保存控件后，当用户点击该控件时，应用会获得10秒内单次访问媒体库特权接口的授权。这适用于任何需要将文件保存到媒体库的应用场景，例如保存图片或视频等。

与需要触发系统应用并由用户选择具体保存路径的Picker不同，保存控件可以直接保存到媒体库路径，使得操作更为便捷。

使用场景：应用仅需要在前台期间，短暂使用保存图片的特性，不需要长时间使用。此时，可以直接使用安全控件中的保存控件，免去权限申请和权限请求等环节（创建媒体资源需要在应用中申请相册管理模块权限’ohos.permission.WRITE_IMAGEVIDEO’），获得临时授权，保存对应图片。

约束与限制

      • 应用在onClick()触发回调到调用媒体库特权接口的时间间隔不能大于10秒。
      • 用户点击一次控件，仅获取一次授权调用。
      • 为了保障用户的隐私不被恶意应用获取，应用需确保安全控件是可见的且用户能够识别的。开发者需要合理的配置控件的尺寸、颜色等属性，避免视觉混淆的情况，如果发生因控件的样式不合法导致授权失败的情况，请检查设备错误日志。

效果图

image.png

        1. 设置安全控件按钮属性。
        2. 创建安全控件按钮。
        3. 调用PhotoAccessHelper.createAsset接口创建图片资源。
        4. 根据资源uri创建file并写入图片数据。

核心代码

 @State saveButtonOptions: SaveButtonOptions = {

    icon: SaveIconStyle.FULL_FILLED, //设置保存按钮的图标风格,不传入该参数表示没有图标，icon和text至少存在一个；这里设置为：保存按钮展示填充样式图标。

    text: SaveDescription.SAVE_IMAGE, //设置保存按钮的文本描述, 不传入该参数表示没有文字描述,这里设置为：保存按钮的文字描述为“保存图片”。

    buttonType: ButtonType.Capsule   //设置保存按钮的背景样式,   不传入该参数表示没有背景。这里设置为：胶囊型按钮（圆角默认为高度的一半）。

  } // 设置安全控件按钮属性

SaveButton(this.saveButtonOptions)// 创建安全控件按钮

  .padding(10)

    //点击动作触发该回调。

  .onClick(async (event, result: SaveButtonOnClickResult) => {

    //SaveButtonOnClickResult枚举说明

    //名称 枚举值  描述

    // SUCCESS 0  保存按钮点击成功。

    // TEMPORARY_AUTHORIZATION_FAILED  1  保存按钮点击后权限授权失败。

    if (result == SaveButtonOnClickResult.SUCCESS) {

      // result：存储权限的授权结果，授权时长为10秒，即触发点击后，可以在10秒之内不限制次数的调用特定媒体库接口，超出10秒的调用会鉴权失败。

      try {

        let context = getContext();

        //获取相册管理模块的实例，用于访问和修改相册中的媒体文件

        let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);

        // onClick触发后10秒内通过createAsset接口创建图片文件，10秒后createAsset权限收回

        let uri = await phAccessHelper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg'); // 创建媒体文件

        console.info('createAsset successfully, uri: ' + uri);

        let file = await fs.open(uri, fs.OpenMode.READ_WRITE || fs.OpenMode.CREATE);

        //   // 使用uri打开文件，可以持续写入内容，写入过程不受时间限制

        await fs.write(file.fd, arrayBuffer);

        /// 关闭文件

        await fs.close(file);

        promptAction.showToast({ message: '已保存至相册！' });

      } catch (err) {

        console.error('createAsset failed, message = ', err);

      }

    } else {

      console.error('SaveButtonOnClickResult createAsset failed');

    }

  })

方案三：动态申请acl****权限，保存图片到图库

PhotoAccessHelper.createAsset接口 需要ohos.permission.WRITE_IMAGEVIDEO权限ohos.permission.WRITE_IMAGEVIDEO权限为系统等级，

该权限当前可申请的场景与功能：应用需要克隆、备份或同步图片/视频类文件。

权限等级和应用APL等级是一一对应的。原则上，拥有低APL等级的应用默认无法申请更高等级的权限。访问控制列表ACL（Access Control List）提供了解决低等级应用访问高等级权限问题的特殊渠道。

image.png

允许ACL跨级别申请

当前仅支持部分权限通过应用市场（AGC）使用ACL的方式跨级别申请权限。在申请发布Profile时，同步提交申请ACL权限

系统权限均定义了“ACL使能”字段，如果应用需要使用跨级别权限时，需使用ACL方式来申请对应权限。在应用权限列表中标记“ACL使能：TRUE”的为支持ACL的权限。当该权限的ACL使能为TRUE，应用可以使用ACL方式跨级别申请该权限。

支持ACL权限

从DevEco Studio 4.0 Release版本起，针对HarmonyOS工程，DevEco Studio支持在调测阶段通过自动签名快速申请ACL权限。

效果图

image.png

  • 在module.json5文件中配置权限
  • requestPermissionsFromUser方法弹框向用户动态申请权限
  • 权限申请成功后通过createAsset接口创建图片文件

核心代码

"requestPermissions": [

{

  "name": "ohos.permission.WRITE_IMAGEVIDEO",

"reason": "$string:app_name",

"usedScene": {

  "abilities": [

  "FormAbility"

  ],

  "when":"always"

}

}

]

async requestPermissionsFn() {

  Logger.info(TAG, `requestPermissionsFn entry`);

  try {

    //申请相册管理模块权限'ohos.permission.WRITE_IMAGEVIDEO'

    this.atManager.requestPermissionsFromUser(this.appContext, [

      'ohos.permission.WRITE_IMAGEVIDEO'

    ]).then(() => {

      Logger.info(TAG, `request Permissions success!`);

      //权限申请成功，保存到图库

      this.SavePicture()

    })

  } catch (err) {

    Logger.info(TAG, `requestPermissionsFromUser call Failed! error: ${err.code}`);

  }

}

async SavePicture(): Promise<void> {

  //

  try {

  let context = getContext();

  //获取相册管理模块的实例，用于访问和修改相册中的媒体文件

  let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);

  //通过createAsset接口创建图片文件

  let uri = await phAccessHelper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg'); // 创建媒体文件

  console.info('createAsset successfully, uri: ' + uri);

  let file = await fs.open(uri, fs.OpenMode.READ_WRITE || fs.OpenMode.CREATE);

  // 使用uri打开文件，可以持续写入内容，写入过程不受时间限制

  await fs.write(file.fd, arrayBuffer);

  // 关闭文件

  await fs.close(file);

} catch (err) {

  console.error('createAsset failed, message = ', err);

}

写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。

希望这一份鸿蒙学习文档能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

请点击→纯血版全套鸿蒙HarmonyOS学习文档

鸿蒙（HarmonyOS NEXT）5.0最新学习路线

在这里插入图片描述

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

《鸿蒙 (HarmonyOS)开发入门教学视频》

在这里插入图片描述

《鸿蒙生态应用开发V3.0白皮书》

在这里插入图片描述

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

在这里插入图片描述

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……
在这里插入图片描述

《鸿蒙开发进阶》

●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……
在这里插入图片描述

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……
在这里插入图片描述

获取以上完整鸿蒙HarmonyOS学习文档，请点击→纯血版全套鸿蒙HarmonyOS学习文档

在这里插入图片描述

代码改变世界996
关注
  • 8
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS云开发基础认证自刷题库
09-13
HarmonyOS云开发基础认证考试是对开发者技能的全面评估。试题涵盖上述各个领域，既包括理论知识，也有实践操作。通过模拟题库进行自我练习，有助于提高答题速度和准确度，确保在正式考试中取得理想成绩。 总的来说...
HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试
10-13
在“HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试”中，我们可以学习到关于HarmonyOS应用开发的关键知识点。这个初级认证主要涉及HarmonyOS的基础架构、组件使用、页面跳转、权限管理、应用结构以及开发工具的使用。...
HarmonyOS开发实战：基于Image组件图片显示
m0_64422261的博客
07-09 857
本例详细开发步骤如下，开发步骤中仅展示相关步骤代码，全量代码请参考完整代码章节的内容。
HarmonyOS Next开发学习手册——显示图片 (Image)
maniuT的博客
07-01 1540
开发者经常需要在应用中显示一些图片，例如：按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、bmp、svg和gif，具体用法请参考 Image 组件。该接口通过图片数据源获取图片，支持本地图片和网络图片的渲染展示。其中，src是图片的数据源，加载方式请参考 加载图片资源。
HarmonyOS Next开发学习手册——保存用户文件
maniuT的博客
07-25 845
在从网络下载文件到本地、或将已有用户文件另存为新的文件路径等场景下，需要使用FilePicker提供的保存用户文件的能力。picker获取的uri只具有临时权限，获取持久化权限需要通过 FilePicker设置永久授权 方式获取。对音频、图片、视频、文档类文件的保存操作类似，均通过调用对应picker的save()接口并传入对应的saveOptions来实现。通过Picker访问相关文件，无需申请权限。
HarmonyOS Next开发学习手册——用户文件
maniuT的博客
07-24 1052
用户文件：文件所有者为登录到该终端设备的用户，包括用户私有的 图片、视频 、音频、文档等。用户文件存放在用户目录下，归属于该设备上登录的用户。用户文件存储位置主要分为 内置存储 、 外置存储。应用对用户文件的创建、访问、删除等行为，需要提前获取用户授权，或由用户操作完成。用户文件uri是文件的唯一标识，在对用户文件进行访问与修改等操作时往往都会使用到uri，不建议开发者解析uri中的片段用于业务代码开发，不同类型的uri使用方式将在下文详细介绍。uri字段说明文件管理器的根目录。
HarmonyOS Next开发学习手册——添加组件（显示图片 (Image)）
maniuT的博客
07-11 866
开发者经常需要在应用中显示一些图片，例如：按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、bmp、svg和gif。该接口通过图片数据源获取图片，支持本地图片和网络图片的渲染展示。其中，src是图片的数据源，加载方式请参考 加载图片资源。
HarmonyOS Next开发学习手册——选择用户文件
maniuT的博客
07-24 1031
用户需要分享文件、保存图片、视频等用户文件时，开发者可以通过系统预置的 文件选择器（FilePicker） ，实现该能力。通过Picker访问相关文件，将拉起对应的应用，引导用户完成界面操作，接口本身无需申请权限。picker获取的uri只具有临时权限，获取持久化权限需要通过 FilePicker设置永久授权 方式获取。根据用户文件的常见类型，选择器（FilePicker）分别提供以下选项：PhotoViewPicker ：适用于图片或视频类型文件的选择与保存（该接口在后续版本不再演进）。
HarmonyOS角落里的知识：通过图库中的图片并显示在Image组件中
m0_70749039的博客
06-27 873
效果说明：点击头像处的相机，拉起用户图库，选择要上传的图片，点击上传，头像随即更新为上传后的图片。
【拥抱鸿蒙】HarmonyOS NEXT实现双路预览并识别文字
m0_64422261的博客
06-17 1319
我们在许多其他平台看到过OCR功能的应用，那么HarmonyOS在这方面的支持如何呢？我们如何能快速使用这一能力呢？使用这一能力需要注意的点有哪些呢？就让我们一起来探究吧~
【鸿蒙实战开发】ArkTS开发选择图片、文件和拍照功能实现
HarmonyOS_002的博客
07-12 884
1.selectPicture 提供选择图片功能我们通过系统组件 picker.PhotoViewPicker 来进行图片选择，通过配置PhotoSelectOptions，指定选择的MIMEType类型（这里PhotoViewMIMETypes.IMAGE_TYPE 图片类型） 、选择的图片最大数量 maxSelectNumber ，这里我们实现单选功能，数值设置为1即可。使用photoPicker.select 拉起系统组件进行选择，然后在回调中获取图片的uri。
基于HarmonyOS 4开发的一款刷题的鸿蒙APP源代码
05-04
这个应用是针对开发者设计的，帮助他们熟悉HarmonyOS的API和开发流程，通过实践来提升对HarmonyOS开发的理解。 1. **HarmonyOS基础** HarmonyOS 4是华为最新的操作系统版本，它提供了分布式能力、轻量级和模块化的...
Harmony OS物联网应用开发实战
10-02
1. **HarmonyOS架构与特点**：介绍HarmonyOS的微内核设计、分布式能力、模块化结构以及其对物联网设备的适应性。HarmonyOS的微内核使得系统更加安全，分布式能力则允许不同设备间高效协作。 2. **开发环境搭建**：...
华为鸿蒙HarmonyOS开发整理资料汇总.zip
11-25
【Codelab】HarmonyOS基于图像模块实现图库图片的四种常见操作 5-2.【CodeLab】手把手教你创建第一个手机“Hello World” 5-3.【Codelab】如此简单！一文带你学会15个HarmonyOS JS组件 5-4.【Codelab】懒人“看”书...
HarmonyOS 地图服务：深度解析其丰富功能与精准导航实力
最新发布
白晓明的博客
08-21 780
HarmonyOS为开发者和用户带来了强大的地图功能支持，其中包括地图组件MapComponent以及地图组件的主要功能入口类MapComponentController。
HarmonyOS应用四之页面加载构建以及数据请求
zouyang920的博客
08-19 347
【代码】HarmonyOS应用四之页面加载及构建。
鸿蒙内核源码分析(信号生产篇) | 注意结构体的名字和作用.
黎程雨的博客
08-21 381
关于信号篇，本只想写一篇，但发现把它想简单了，内容不多，难度极大.整理了好长时间，理解了为何要单独为它开一章，原因有二
鸿蒙UIAbility组件概述(一)
gitzzp的博客
08-17 835
UIAbility组件是系统调度的基本单元，为应用提供绘制界面的窗口。一个应用可以包含一个或者多个UIAbility组件。每一个UIAbility组件都会在最近任务列表中显示一个对应的任务。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值