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

 应用场景

有时候我们需要分享某个组件内容,而不是利用系统级别的截图保存整个屏幕内容,就需要使用单独对组件截图的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和另一个失败的枚举。

    存储权限的授权结果,授权时长为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()
    }
    })


    最后编辑于
    ©著作权归作者所有,转载或内容合作请联系作者
    平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

    推荐阅读更多精彩内容