鸿蒙NEXT开发笔记(十一)仿微信聊天App的选择相册图片

上一节我们利用鸿蒙自带的JSON库实现了封装和解析JSON串,那么接下来准备把图片数据采用JSON格式封装。不过在此之前,得先从系统相册挑选一张待发送的图片才行,正所谓要先有鸡而后才有蛋呀。
鸿蒙提供了photoAccessHelper工具,无需申请相册或存储权限,即可从相册中选择几张图片。使用photoAccessHelper之前,要在ETS代码开头添加下面的导包语句:

import { photoAccessHelper } from '@kit.MediaLibraryKit';

photoAccessHelper翻译过来叫做相片访问帮助器,这个帮助器主要提供了两个方法,一个是PhotoSelectOptions,可获取相片选择参数;另一个是PhotoViewPicker,可获取相片选择器。
从PhotoSelectOptions获取的相片选择参数中,主要有下列四个参数说明如下:
MIMEType:设置选择器可访问的文件类型。填photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE表示图片,填VIDEO_TYPE表示视频。
maxSelectNumber:设置单次挑选图片的最大数量。如果只需选择一张图片,填1即可。
isSearchSupported:是否支持搜索图片。
isPhotoTakingSupported:是否支持拍摄照片。默认为false。
于是从相册选择单张图片的参数设置代码如下:

let photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
photoSelectOptions.maxSelectNumber = 1;

从PhotoViewPicker返回的相片选择器,可调用select方法拉起相册,供用户挑选相册图片。select方法的输入参数就是前面提到的PhotoSelectOptions对象,select方法的图片选择结果通过异步方式返回,返回结果为PhotoSelectResult类型,结果对象的photoUris字段保存着用户选中的一张或者多张图片的文件路径。
下面是调用PhotoViewPicker对象的select方法代码例子:

let photoPicker = new photoAccessHelper.PhotoViewPicker();
photoPicker.select(photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {
  console.info('PhotoViewPicker.select successfully, photoSelectResult uri: ' + JSON.stringify(photoSelectResult));
  this.imagePath = photoSelectResult.photoUris[0]
}).catch((err: BusinessError) => {
  console.error('PhotoViewPicker.select failed with err: ' + JSON.stringify(err));
});

上面代码从挑选结果中取到第一张图片路径保存在imagePath属性中,接着即可使用Image组件显示该路径的图片画面,Image组件的渲染代码如下:

Image(this.imagePath).width('100%').objectFit(ImageFit.Contain)

综合以上的相册图片挑选代码,点击选择按钮打开的相册界面如下图所示:

选中某张图片之后,点击相册右上角的确认按钮,回到测试App界面如下图所示:

可见通过photoAccessHelper正常实现了相册图片的挑选功能。

下一篇文章会介绍如何把图片文件转换为BASE64字符串。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值