HarmonyOS第二十八课——使用安全控件保存图片到相册

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

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

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

约束与限制

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

开发步骤

以保存对话中图片为例，应用仅需要在前台期间，短暂使用保存图片的特性，不需要长时间使用。此时，可以直接使用安全控件中的保存控件，免去权限申请和权限请求等环节，获得临时授权，保存对应图片。

1、导入文件和媒体库依赖。

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

设置图片资源，并添加保存控件。

保存控件是一种类似于按钮的安全控件，由图标、文本和背景组成。其中，图标和文本至少需要有一个，背景是可选的。图标和文本不能自定义，只能从已有的选项中选择。在声明安全控件的接口时，有传参和不传参两种方式。不传参将默认创建一个包含图标、文字和背景的按钮，传参则根据参数创建，不包含未配置的元素。

当前示例使用默认参数。具体请参见SaveButton控件。此外，所有安全控件都继承安全控件通用属性，可用于定制样式。

例

import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { fileIo } from '@kit.CoreFileKit';
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State saveButtonOptions: SaveButtonOptions = {
    icon: SaveIconStyle.FULL_FILLED,
    text:SaveDescription.SAVE_IMAGE,
    buttonType:ButtonType.Capsule
  } // 设置安全控件按钮属性

  build() {
    Column(){
      Text('保存图片到相册')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .margin({top:30})
      SaveButton(this.saveButtonOptions)// 创建安全控件按钮
        .onClick(async (event,result:SaveButtonOnClickResult) =>{
            if (result != SaveButtonOnClickResult.SUCCESS){
              promptAction.showToast({message:'SaveButtonOnClickResult create asset failed'})
              return
            }
            this.savePhoto()
        })


    }.width('100%')
    .height('100%')
  }

  async  savePhoto(){
    let content = getContext()
    let helper = photoAccessHelper.getPhotoAccessHelper(content)
    try {
      // onClick触发后5秒内通过createAsset接口创建图片文件，5秒后createAsset权限收回。
      let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE,'png')
      //使用uri打开文件，可以持续写入内容，写入过程不受时间限制
      let file = await fileIo.open(uri,fileIo.OpenMode.READ_WRITE| fileIo.OpenMode.CREATE)
      content.resourceManager.getMediaContent($r('app.media.abc').id,0).then(async  value =>{
        let media = value.buffer
        //写入到媒体库文件中
        await fileIo.write(file.fd,media)
        await fileIo.close(file.fd)
        promptAction.showToast({message:"已保存至相册"})
      })
      
    } catch (e) {
      console.error(`create asset failed with error: ${e.code}, ${e.message}`);
    }

  }
}