HarmonyOS NEXT鸿蒙中对某个组件截图并保存截图到本地

藏宝男孩儿

968人浏览 · 2025-03-20 20:42:36

藏宝男孩儿 · 2025-03-20 20:42:36 发布

应用场景

有时候我们需要分享某个组件内容，而不是利用系统级别的截图保存整个屏幕内容，就需要使用单独对组件截图的API，并且需要把截取的图片存入本地相册。

核心API

componentSnapShot 根据组件id截取组件图片 API 10+
ImagePacker 图片压缩或重新打包 API 12+
fileIo读写文件 API 6+
photoAccessHelper 该模块提供相册管理模块能力 API 11+
SaveButton 安全控件的保存控件，点击该保存按钮，可以临时获取存储权限 API 10+

首先要先截取组件 componentSnapshot API 10+

给你想截图的组件一个唯一的id标识

Column() {

}
.id('share') // 用于后续截图使用

根据组件的id调用componentSnapShot的方法生成截图对象

const pixelMap = await componentSnapshot.get('share')

转成二进制数据流 ImagePacker API 12+

先创建imagePacker的实例

后面的配置项是生成的图片格式和图片质量

const imagePacker = image.createImagePacker()
const arrayBuffer = await imagePacker.packToData(pixelMap, 
{ format: "image/jpeg", quality: 98 }
)

读写文件 fileIo API 6+

需要使用上下文

用时间戳设置唯一文件名

使用fileIo打开或者创建文件

写入二进制数据

关闭文件

  // 3.借助fileIo读写文件
 // 3.1获取上下文
const ctx = getContext(this)
// 3.2获取沙箱中存图的路径
const imagePath = ctx.cacheDir + '/' + Date.now() + '.jpeg'
// 3.3以 创建 或 读写 的模式打开文件（没有则创建并打开，有则打开）
const file = fileIo.openSync(imagePath, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE)
// 3.4同步写入二进制数据流到文件中
fileIo.writeSync(file.fd, arrayBuffer)
// 3.5同步去关闭文件
fileIo.closeSync(file.fd)

把沙箱里的文件写入相册

这里是固定写法

但是资产变更这一步需要配置ohos.permission.WRITE_IMAGEVIDEO权限

不过本次我们通过saveButton的方式暂时性获取权限

// 4. 把沙箱中的文件写入相册
      // 4.1 获取资源文件的uri地址
      const imgUrl = fileUri.getUriFromPath(imagePath)
      // 4.2 进行图片资产变更(私有->公有)
      const assetChangeRequest = photoAccessHelper.MediaAssetChangeRequest.createImageAssetRequest(ctx, imgUrl);
      // 4.3 提交媒体变更请求
      // 4.3.1 获取相册管理模块的实例
      const phAccessHelper = photoAccessHelper.getPhotoAccessHelper(ctx)
      // 4.3.2 调用资产变更方法
      // 需要配置权限: permission: ohos.permission.WRITE_IMAGEVIDEO
      await phAccessHelper.applyChanges(assetChangeRequest);

saveButton的用法 API 10+

主要是配置和事件参数

默认创建带有图标 icon、文本 text、背景 buttonType的保存按钮。

不支持通用事件，仅支持onclick（）

onClick(event: (event: ClickEvent, result: SaveButtonOnClickResult) => void)

关于result：

是只有success和另一个失败的枚举。

存储权限的授权结果，授权时长为10秒，即触发点击后，可以在10秒之内不限制次数的调用特定媒体库接口，超出10秒的调用会鉴权失败。

SaveButton({
    icon: SaveIconStyle.FULL_FILLED,     // 图标
    text: SaveDescription.SAVE_IMAGE,    // 文字
    buttonType: ButtonType.Normal        // 按钮样式
  })
.onClick((event: ClickEvent, result: SaveButtonOnClickResult) => {
  // 判断是否有权限，有则调用存本地方法
  if (result === SaveButtonOnClickResult.SUCCESS) {
    this.saveImage()
  }
})