写点什么

鸿蒙开发之无须申请权限访问相册图片

作者:猫林老师
  • 2024-12-18
    广东
  • 本文字数:1634 字

    阅读完需:约 5 分钟

鸿蒙开发之无须申请权限访问相册图片

访问相册图片介绍

在应用开发中,很多场景需要我们需要访问相册中的图片。例如:上传头像、上传银行卡、身份证资料、扫描文件功能、美颜功能等


所以访问相册里的图片成为我们必须要学习和掌握的内容。那如何访问相册图片呢?


在 HarmonyOS 中,鉴于对用户隐私的高度保护,要方便的完全读取相册与写入相册,需要极其复杂的权限审核。所幸,HarmonyOS 也考虑到读取相册对于开发者而言也是一个非常常用的一个功能,因而提供了 photoAccessHelper 里的 PhotoViewPicker 来帮助开发者无需获得复杂权限的情况下来读取相册内容。

使用方法

  1. 导入相册管理模块。


   import { photoAccessHelper } from '@kit.MediaLibraryKit';
复制代码


  1. 实例化 PhotoViewPicker 对象(也即图片选择器对象)


   let photoPicker = new photoAccessHelper.PhotoViewPicker();
复制代码


  1. 调用上述对象的 select 方法选择图片


   photoPicker.select({       // 传入能选择的文件类型,这里选的是图片类型       MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,       // 设置能选择的数量       maxSelectNumber: 1     })       .then((res: photoAccessHelper.PhotoSelectResult) => {            console.log(res.photoUris.join(''))       })       .catch((err: Error) => {         // 出错回调         console.log(err.message)       })   })
复制代码


这里可以看到调用 select 方法有两个参数:MIMEType、maxSelectNumber


MIMEType 即设置可以选哪些类型的媒体文件,可选值有


1. IMAGE_TYPE:图片类型,也即`'image/*'`1. VIDEO_TYPE:视频类型,也即`'video/*'`1. IMAGE_VIDEO_TYPE:所有类型皆可,也即:`'*/*'`1. MOVING_PHOTO_IMAGE_TYPE:动态照片类型(实况图),也即`'image/movingPhoto'`
复制代码


maxSelectNumber 就比较好理解了,就是设置可以选择多少数量,若不设置默认为 50,最大也只能设置 500


  1. select 方法是用 Promise 进行封装的,因此调用后有两种状态,成功进入 then,失败进入 catch

  2. 进入 then 代表读取图片成功,读取到的结果是PhotoSelectResult类型的,这个类型有一个非常重要的属性,即为:photoUris,它是一个数组,里面保存了选择的资源的临时路径,像我们上面的代码,最大只允许选择 1 张图片,因此取下标 0 即为选择的图片或视频

用一个小界面测试一下

上面我们已经学了它的基本使用,我们用一个小界面测试一下。界面仅需放置一个 Image 用来展示选择后的图片,以及用一个按钮进行图片选择,代码如下


// 导入所需工具import { photoAccessHelper } from '@kit.MediaLibraryKit'
@Entry@Componentstruct Index { // 用个变量保存读取到得分图片 @State imgUri: string = ''
build() { Column() { // 展示图片 Image(this.imgUri) .height('45%') // 选择图片 Button('选择图片') .width('80%') .onClick(() => { // 实例化选择器 let photoPicker = new photoAccessHelper.PhotoViewPicker() // 开始选择图片,设置只允许选择图片,且最大选择1张 photoPicker.select({ MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE, maxSelectNumber: 1 }) .then((res: photoAccessHelper.PhotoSelectResult) => {
// 读取成功则赋值给变量去展示到界面 this.imgUri = res.photoUris[0] }) .catch((err: Error) => { // 出错回调 console.log(err.message) }) }) } .width('100%') .height('100%') }}
复制代码


最终效果如下:成功将猫林老师的照片展示出来了


总结

  1. 如果需要不申请权限的情况下让 app 读取到系统图库里的图片,需使用photoAccessHelper

  2. 使用起来非常简单,仅需实例化PhotoViewPicker对象后再调用select方法即可

  3. 下篇猫林老师给大家介绍如何不申请权限的情况下写入照片到图库

用户头像

猫林老师

关注

还未添加个人签名 2024-12-06 加入

还未添加个人简介

评论

发布
暂无评论
鸿蒙开发之无须申请权限访问相册图片_鸿蒙_猫林老师_InfoQ写作社区