HarmonyOS(52) 使用安全控件SaveButton保存图片

SaveButton使用简介

前言
SaveButton简介
- 约束与限制
实现点击事件
- 全部源码
参考资料：

前言

在HarmonyOS(50) 截图保存功能实现一文中简单介绍了截图保存功能，本篇博文介绍一个更简单的保存图片控件SaveButton.

SaveButton简介

SaveButton允许用户通过点击按钮临时获取存储权限，无需额外的编写权限申请代码。当用户点击该控件时，应用会获得10秒内单次访问媒体库特权接口的授权。这适用于任何需要将文件保存到媒体库的应用场景，例如保存图片或视频等

约束与限制

当用户首次点击应用中的保存控件，系统将弹窗请求用户授权。如果用户点击“取消”，弹窗消失，应用无授权，用户再次点击保存控件时，将会重新弹窗；如果用户点击“允许”，弹窗消失，应用将被授予临时保存权限，此后点击该应用的保存控件将不会弹窗。(弹授权弹框如图所示），默认样式是一个图标+下载字样
应用在onClick()触发回调到调用媒体库特权接口的时间间隔不能大于10秒。
用户点击一次控件，仅获取一次授权调用。
为了保障用户的隐私不被恶意应用获取，应用需确保安全控件是可见的且用户能够识别的。开发者需要合理的配置控件的尺寸、颜色等属性，避免视觉混淆的情况，如果发生因控件的样式不合法导致授权失败的情况，请检查设备错误日志。
不支持自定义图标和文字，SaveButton自定义了下载图标和9中类型的文字枚举。效果如下图：

实现点击事件

点击保存的时候需要设置相应的点击事件，代码如下：

 SaveButton().onClick(async (event: ClickEvent, result: SaveButtonOnClickResult) => {if (result === SaveButtonOnClickResult.SUCCESS) {const context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;// 免去权限申请和权限请求等环节，获得临时授权，保存对应图片savePhotoToGallery(context);} else {promptAction.showToast({ message: '设置权限失败！' })}})//注意该方法为异步方法
async function savePhotoToGallery(context: common.UIAbilityContext) {let helper = photoAccessHelper.getPhotoAccessHelper(context);// onClick触发后5秒内通过createAsset接口创建图片文件，5秒后createAsset权限收回。let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg');// 使用uri打开文件，可以持续写入内容，写入过程不受时间限制let file = await fileIo.open(uri, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);// $r('app.media.startIcon')需要替换为开发者所需的图像资源文件context.resourceManager.getMediaContent($r('app.media.startIcon').id, 0).then(async value => {let media = value.buffer;// 写到媒体库文件中await fileIo.write(file.fd, media);await fileIo.close(file.fd);promptAction.showToast({ message: '已保存至相册！' });});
}}

全部源码

相关官方demo源码如下：

import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { fileIo } from '@kit.CoreFileKit';
import { common } from '@kit.AbilityKit';
import { promptAction } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';async function savePhotoToGallery(context: common.UIAbilityContext) {let helper = photoAccessHelper.getPhotoAccessHelper(context);try {// onClick触发后5秒内通过createAsset接口创建图片文件，5秒后createAsset权限收回。let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg');// 使用uri打开文件，可以持续写入内容，写入过程不受时间限制let file = await fileIo.open(uri, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);// $r('app.media.startIcon')需要替换为开发者所需的图像资源文件context.resourceManager.getMediaContent($r('app.media.startIcon').id, 0).then(async value => {let media = value.buffer;// 写到媒体库文件中await fileIo.write(file.fd, media);await fileIo.close(file.fd);promptAction.showToast({ message: '已保存至相册！' });});}catch (error) {const err: BusinessError = error as BusinessError;console.error(`Failed to save photo. Code is ${err.code}, message is ${err.message}`);}
}@Entry
@Component
struct Index {build() {Row() {Column({ space: 10 }) {// $r('app.media.startIcon')需要替换为开发者所需的图像资源文件Image($r('app.media.startIcon')).height(400).width('100%')SaveButton().onClick(async (event: ClickEvent, result: SaveButtonOnClickResult) => {if (result === SaveButtonOnClickResult.SUCCESS) {const context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;// 免去权限申请和权限请求等环节，获得临时授权，保存对应图片savePhotoToGallery(context);} else {promptAction.showToast({ message: '设置权限失败！' })}})}.width('100%')}.height('100%').backgroundColor(0xF1F3F5)}
}