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

SaveButton使用简介

前言

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

SaveButton简介

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

约束与限制

  • 当用户首次点击应用中的保存控件,系统将弹窗请求用户授权。如果用户点击"取消",弹窗消失,应用无授权,用户再次点击保存控件时,将会重新弹窗;如果用户点击"允许",弹窗消失,应用将被授予临时保存权限,此后点击该应用的保存控件将不会弹窗。(弹授权弹框如图所示),默认样式是一个图标+下载字样

  • 应用在onClick()触发回调到调用媒体库特权接口的时间间隔不能大于10秒。

  • 用户点击一次控件,仅获取一次授权调用。

  • 为了保障用户的隐私不被恶意应用获取,应用需确保安全控件是可见的且用户能够识别的。开发者需要合理的配置控件的尺寸、颜色等属性,避免视觉混淆的情况,如果发生因控件的样式不合法导致授权失败的情况,请检查设备错误日志。

  • 不支持自定义图标和文字,SaveButton自定义了下载图标和9中类型的文字枚举。效果如下图:

相关代码如下:

dart 复制代码
 SaveButton()//默认样式
 SaveButton({icon:SaveIconStyle.FULL_FILLED,text:SaveDescription.SAVE})
 SaveButton({text:SaveDescription.SAVE_IMAGE})
 SaveButton({text:SaveDescription.SAVE_FILE})
 SaveButton({text:SaveDescription.DOWNLOAD})
 SaveButton({text:SaveDescription.DOWNLOAD_FILE})
 SaveButton({text:SaveDescription.DOWNLOAD_AND_SHARE})
 SaveButton({text:SaveDescription.RECEIVE})
 SaveButton({text:SaveDescription.CONTINUE_TO_RECEIVE})
 SaveButton({text:SaveDescription.SAVE_TO_GALLERY})

实现点击事件

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

dart 复制代码
 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源码如下:

dart 复制代码
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)
  }
}

参考资料:

使用保存控件
SaveButton
HarmonyOS(50) 截图保存功能实现

相关推荐
zskj_zhyl3 小时前
毫米波雷达守护银发安全:七彩喜跌倒检测仪重构居家养老防线
人工智能·安全·重构
爱笑的眼睛114 小时前
08-自然壁纸实战教程-视频列表-云
华为·harmonyos
qq_312920118 小时前
开源入侵防御系统——CrowdSec
安全·开源
饶了我吧,放了我吧9 小时前
计算机网络实验——无线局域网安全实验
计算机网络·安全·web安全
TracyCoder12310 小时前
Apache Shiro 框架详解
安全·apache·shiro·认证·登录
二二孚日10 小时前
自用华为ICT云赛道AI第三章知识点-MindSpore特性、MindSpore开发组件
人工智能·华为
Georgewu11 小时前
【HarmonyOS 5】鸿蒙中自定义弹框OpenCustomDialog、CustomDialog与DialogHub的区别详解
harmonyos
塞尔维亚大汉11 小时前
鸿蒙内核源码分析(消息封装篇) | 剖析LiteIpc 进程通讯内容
harmonyos·源码阅读
Georgewu11 小时前
【HarmonyOS NEXT】鸿蒙跳转华为应用市场目标APP下载页
harmonyos
字节跳动安全中心11 小时前
当AI智能体学会“欺骗”,我们如何自保?来自火山的MCP安全答卷
安全·llm·mcp