图片保存到相册-CSDN博客

本文链接：https://blog.csdn.net/GlutinousCub/article/details/143845471

1. 组件截图

目标：分享弹窗截图并存储到缓存目录

前置知识

componentSnapShot

get(id: string, options?: SnapshotOptions): Promise<image.PixelMap>

1. 获取已加载的组件的截图，传入组件的组件标识，找到对应组件进行截图。
2. 通过Promise返回结果。

ImagePacker

packing(source: PixelMap, option: PackingOption): Promise<ArrayBuffer>

1. 图片压缩或重新打包，使用Promise形式返回结果

2. 实现组件截图

使用 componentSnapShot 组件截图，得到 PixelMap 像素图像数据
使用 ImagePacker 打包 PixelMap 数据，转成二进制 ArrayBuffer 图片数据
将 ArrayBuffer 图片数据写入缓存目录，生成图片

 async saveImage() {
    // 进行截图
    const pixelMap = await componentSnapshot.get('share')

    // 图片数据 - 获取图片二进制数据
    const imagePacker = image.createImagePacker()

    // format 图片类型
    // quality 图片质量 100 -> 原图
    const arrayBuffer = await imagePacker.packing(pixelMap, { format: 'image/jpeg', quality: 98 })

    // 存储图片到应用下
    const ctx = getContext(this)

    // 生成图片路径 - 基于时间戳
    const imagePath = ctx.cacheDir + '/' + Date.now() + '.jpeg'

    // 让图片具备创建和读写的能力
    const file = fileIo.openSync(imagePath, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE)

    // 写入数据	--	开启IO流
    fileIo.writeSync(file.fd, arrayBuffer)

    // 关闭图片读写	--	关闭IO流
    fileIo.closeSync(file.fd)

    promptAction.showToast({ message: '保存成功' })
  }

Text('保存到本地')
  .fontColor($r('app.color.white'))
  .fontSize(14)
  .padding(12)
  .backgroundColor($r('app.color.common_main_color'))
  .onClick(() => {
    this.saveImage()
  })

3. 保存到相册

目标：将沙箱缓存目录中的文件保存到相册

前置知识

photoAccessHelper 该模块提供相册管理模块能力，包括创建相册以及访问、修改相册中的媒体数据信息等。
SaveButton 安全控件的保存控件，用户通过点击该保存按钮，可以临时获取存储权限，而不需要权限弹框授权确认。

3.1. 存储照片到本地

使用 photoAccessHelper模块发起资源变更请求，存储图片到相册
使用 SaveButton安全组件获取短时权限，进行相册操作

存储图片，但是没有权限

  async saveImage() {
    // 进行截图
    const pixelMap = await componentSnapshot.get('share')

    // 图片数据 - 获取图片二进制数据
    const imagePacker = image.createImagePacker()

    // format 图片类型
    // quality 图片质量 100 -> 原图
    const arrayBuffer = await imagePacker.packing(pixelMap, { format: 'image/jpeg', quality: 98 })

    // 存储图片到应用下
    const ctx = getContext(this)

    // 生成图片路径 - 基于时间戳
    const imagePath = ctx.cacheDir + '/' + Date.now() + '.jpeg'

    // 让图片具备创建和读写的能力
    const file = fileIo.openSync(imagePath, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE)

    // 写入数据
    fileIo.writeSync(file.fd, arrayBuffer)

    // 关闭图片
    fileIo.closeSync(file.fd)

    // 保存图片至相册: photoAccessHelper 写入相册 + 获取保存权限
    // 1.获取uri
    // 2.创建相册资源请求 - 图片资产的变更请求
    // 3.添加请求,实现存储

    // 将上面获取的图片路径 -> 转化为uri
    const uri = fileUri.getUriFromPath(imagePath)
    // 创建图片资产变更请求	--	将缓存目录中的图片 ->相册中
    const assetChangeRequest = photoAccessHelper.MediaAssetChangeRequest.createImageAssetRequest(ctx, uri)
    const phAccessHelper = photoAccessHelper.getPhotoAccessHelper(ctx)
    await phAccessHelper.applyChanges(assetChangeRequest)

    promptAction.showToast({ message: '保存成功' })
  }

使用安全控件

Row() {
  SaveButton({
    icon: SaveIconStyle.FULL_FILLED,
    text: SaveDescription.SAVE_IMAGE,
    buttonType: ButtonType.Normal
  })
    .fontColor($r('app.color.white'))
    .fontSize(14)
    .padding(12)
    .backgroundColor($r('app.color.common_main_color'))
    .onClick((event: ClickEvent, result: SaveButtonOnClickResult) => {
      if (result == SaveButtonOnClickResult.SUCCESS) {
        // 用户同意操作
        this.saveImage()
      }
    })
  }
    .borderRadius({ topLeft: 8 })
    .clip(true)