应用场景
有时候我们需要分享某个组件内容，而不是利用系统级别的截图保存整个屏幕内容，就需要使用单独对组件截图的API，并且需要把截取的图片存入本地相册。
核心API
componentSnapShot 根据组件id截取组件图片
ImagePacker 图片压缩或重新打包
fileIo读写文件
首先要先截取组件 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和另一个失败的枚举。
存储权限的授权结果，授权时长为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()
}
})
