应用场景

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

核心API

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

首先要先截取组件 componentSnapshot

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

Column() {

}

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

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

const pixelMap = await componentSnapshot.get(share)

转成二进制数据流 ImagePacker

先创建imagePacker的实例

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

const imagePacker = image.createImagePacker()

const arrayBuffer = await imagePacker.packToData(pixelMap,

{ format: "image/jpeg", quality: 98 }

)

读写文件 fileIo

需要使用上下文

用时间戳设置唯一文件名

使用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的用法

主要是配置和事件参数

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

编辑

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

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

关于result：

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

SaveButton({

icon: SaveIconStyle.FULL_FILLED, // 图标

text:SaveDescription.SAVE_IMAGE, // 文字

buttonType: ButtonType.Normal // 按钮样式

})

.onClick((event: ClickEvent, result: SaveButtonOnClickResult) => {

// 判断是否有权限，有则调用存本地方法

if (result === SaveButtonOnClickResult.SUCCESS) {

this.saveImage()

}

})