harmony-utils之SnapshotUtil,截图相关工具类

简介: harmony-utils是一款专为HarmonyOS开发的高效工具库,提供丰富的实用功能,助力开发者快速构建鸿蒙应用。其中的SnapshotUtil类专注于截图功能,支持组件截图、自定义Builder渲染截图、窗口截图及系统截屏监听等操作,极大提升了开发效率与应用交互体验。

harmony-utils之SnapshotUtil,截图相关工具类

harmony-utils 简介与说明


harmony-utils 一款功能丰富且极易上手的HarmonyOS工具库,借助众多实用工具类,致力于助力开发者迅速构建鸿蒙应用。其封装的工具涵盖了APP、设备、屏幕、授权、通知、线程间通信、弹框、吐司、生物认证、用户首选项、拍照、相册、扫码、文件、日志,异常捕获、字符、字符串、数字、集合、日期、随机、base64、加密、解密、JSON等一系列的功能和操作,能够满足各种不同的开发需求。
picker_utils 是harmony-utils拆分出来的一个子库,包含PickerUtil、PhotoHelper、ScanUtil。

下载安装
ohpm i @pura/harmony-utils
ohpm i @pura/picker_utils

  //全局初始化方法,在UIAbility的onCreate方法中初始化 AppUtil.init()
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    AppUtil.init(this.context);
  }

API方法与使用


get 获取已加载的组件的截图,传入组件的组件id,找到对应组件进行截图
let pixelMap1 = await SnapshotUtil.get('snapshot_id1');
let pixelMap2 = SnapshotUtil.getSync('snapshot_id2');
createFromBuilder 在应用后台渲染CustomBuilder自定义组件,并输出其截图
SnapshotUtil.createFromBuilder(() => {
  this.RandomBuilder()
}).then((pixelMap) => {
  Utils.showSheetImg(pixelMap);
}).catch((err: BusinessError) => {
  ToastUtil.showToast("组件生成图片异常!");
});

@Builder
RandomBuilder() {
  Column() {
    Text("Builder截图")
      .fontSize(20)
      .fontWeight(FontWeight.Bold)
      .fontStyle(FontStyle.Italic)
      .margin({ top: 20 })
    Image($r("app.media.test_as4"))
      .margin({ top: 30, bottom: 10 })
      .padding(10)
      .width('95%')
      .backgroundColor(Color.Pink)
  }
  .backgroundColor(Color.Blue)
  .padding(10)
  .width('100%')
  .aspectRatio(1)
  .margin({ top: 50 })
  .id("rBuilder")
}
snapshot 获取窗口截图,使用Promise异步回调
let pixelMap3 = await SnapshotUtil.snapshot();
onSnapshotListener 开启系统截屏事件的监听
SnapshotUtil.onSnapshotListener(() => {
  ToastUtil.showToast("系统截图了!");
  LogUtil.error("系统截图了!");
});
removeSnapshotListener 关闭系统截屏事件的监听
 SnapshotUtil.removeSnapshotListener();
 SnapshotUtil.removeSnapshotListener(snapshotCallBack);

示例代码


import {
    router } from '@kit.ArkUI';
import {
    LogUtil, SnapshotUtil, ToastUtil } from '@pura/harmony-utils';
import {
    DescribeBean } from '../../model/DescribeBean';
import {
    BusinessError } from '@kit.BasicServicesKit';
import {
    MockSetup } from '@ohos/hamock';
import {
    TitleBarView } from '../../component/TitleBarView';
import {
    Utils } from '../../utils/Utils';

/**
 * 组件截图和窗口截图工具类
 */
@Entry
@Component
struct Index {
   
  private scroller: Scroller = new Scroller();
  @State describe: DescribeBean = router.getParams() as DescribeBean;
  private snapshotCallBack: VoidCallback = () => {
    //系统截图监听回调
    ToastUtil.showToast("您已成功截图!");
    LogUtil.error("您已成功截图!");
  }

  @MockSetup
  mock() {
   
    this.describe = new DescribeBean("SnapshotUtil", "组件截图和窗口截图工具类");
  }

  build() {
   
    Column() {
   
      TitleBarView({
    describe: this.describe })
      Divider()
      Scroll(this.scroller) {
   
        Column() {
   
          Button("get()")
            .btnStyle()
            .onClick(async () => {
   
              let pixelMap1 = await SnapshotUtil.get('snapshot_id1');
              Utils.showSheetImg(pixelMap1);
            })
          Button("getSync()")
            .btnStyle()
            .onClick(() => {
   
              let pixelMap1 = SnapshotUtil.getSync('snapshot_id2');
              Utils.showSheetImg(pixelMap1);
            })
          Button("createFromBuilder()")
            .btnStyle()
            .onClick(() => {
   
              SnapshotUtil.createFromBuilder(() => {
   
                this.RandomBuilder()
              }).then((pixelMap) => {
   
                Utils.showSheetImg(pixelMap);
              }).catch((err: BusinessError) => {
   
                LogUtil.error("createFromBuilder-异常信息:\n" + JSON.stringify(err));
                ToastUtil.showToast("组件生成图片异常!");
              });
            })
          Button("snapshot()")
            .btnStyle()
            .onClick(async () => {
   
              let pixelMap3 = await SnapshotUtil.snapshot();
              Utils.showSheetImg(pixelMap3);
            })
          Button("onSnapshotListener()")
            .btnStyle()
            .onClick(() => {
   
              SnapshotUtil.onSnapshotListener(() => {
   
                ToastUtil.showToast("系统截图了!");
                LogUtil.error("系统截图了!");
              });
            })
          Button("removeSnapshotListener()")
            .btnStyle()
            .onClick(() => {
   
              SnapshotUtil.removeSnapshotListener();
            })

          Button("onSnapshotListener()-指定")
            .btnStyle()
            .onClick(() => {
   
              SnapshotUtil.onSnapshotListener(this.snapshotCallBack);
            })
          Button("removeSnapshotListener()-指定")
            .btnStyle()
            .onClick(() => {
   
              SnapshotUtil.removeSnapshotListener(this.snapshotCallBack);
            })

          Column() {
   
            Text("id组件截图1")
              .fontSize(16)
              .fontWeight(FontWeight.Bold)
              .fontStyle(FontStyle.Italic)
              .margin({
    top: 10 })
            Column() {
   
              Text("id组件截图2")
                .fontSize(12)
                .fontWeight(FontWeight.Bold)
                .fontStyle(FontStyle.Italic)
                .margin({
    top: 10 })
              Image($r("app.media.test_as3"))
                .margin({
    top: 10, bottom: 10 })
                .borderRadius(6)
            }
            .backgroundColor(Color.Pink)
            .borderRadius(10)
            .padding(10)
            .margin({
    top: 10 })
            .width('95%')
            .id('snapshot_id2')
          }
          .backgroundColor(Color.Brown)
          .border({
   
            width: 5,
            radius: 5,
            color: Color.Orange,
            style: BorderStyle.Dashed
          })
          .padding(10)
          .width('90%')
          .margin({
    top: 50 })
          .id('snapshot_id1')

          Blank().layoutWeight(1)
        }
        .margin({
    top: 5, bottom: 5 })
      }
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start)
    .backgroundColor($r('app.color.main_background'))
  }

  @Builder
  RandomBuilder() {
   
    Column() {
   
      Text("Builder截图")
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .fontStyle(FontStyle.Italic)
        .margin({
    top: 20 })
      Image($r("app.media.test_as4"))
        .margin({
    top: 30, bottom: 10 })
        .padding(10)
        .width('95%')
        .backgroundColor(Color.Pink)
    }
    .backgroundColor(Color.Blue)
    .padding(10)
    .width('100%')
    .aspectRatio(1)
    .margin({
    top: 50 })
    .id("rBuilder")
  }

}


@Styles
function btnStyle() {
   
  .width('90%')
  .margin({
    top: 10, bottom: 5 })
}

创作不易,请给童长老点赞👍


https://github.com/787107497/harmony-utils
https://gitee.com/tongyuyan/harmony-utils
OpenHarmony三方库

目录
相关文章
|
JSON 中间件 C#
氚云的第三方接口调用| 学习笔记
快速学习氚云的第三方接口调用。
|
6月前
|
存储 人工智能 前端开发
从零到一构建PACS:如何设计一套能处理海量影像的企业级后端系统
开发医院PACS系统是跨医学影像标准(DICOM/HL7/IHE)、分布式架构、高性能前后端、海量存储与AI集成的复杂工程,需兼顾合规性、稳定性与临床体验。
538 1
|
10月前
|
XML 安全 Java
有了解过 SpringBoot 的参数配置吗?
我是小假 期待与你的下一次相遇 ~
303 4
|
9月前
|
传感器 人工智能 数据可视化
构建AI智能体:五十三、反应式应急+深思式优化:反应速度与规划智慧的平衡
智能体系统设计的混合架构研究 本文探讨了智能体系统的两种基本范式及其融合架构。反应式智能体采用"感知-行动"模式,具有响应速度快、资源消耗低的特点,适用于紧急场景;深思熟虑智能体采用"感知-推理-行动"模式,具备复杂问题求解能力,但计算成本高。研究表明,最先进的解决方案是分层混合架构:底层反应层处理紧急任务,上层深思层负责战略规划,二者通过动态交互机制协作。这种架构在扫地机器人等应用场景中展现出显著优势,既能快速应对突发情况,又能执行长期规划任务。
695 11
|
10月前
|
安全 网络协议 Docker
Docker Network 命令详解:构建容器间通信的桥梁
本文深入解析Docker网络命令,涵盖基础网络类型与核心操作。从查看、创建、连接到清理网络,结合实用示例,助你掌握容器间通信管理,提升微服务架构下的网络配置与排障能力。
865 4
|
NoSQL 关系型数据库 API
写给工程师的 MacBook 商用级大模型知识库部署方案(中)
写给工程师的 MacBook 商用级大模型知识库部署方案(中)
1055 1
|
JSON 数据可视化 Linux
数据可视化工具JSON Crack结合内网穿透实现公网访问
数据可视化工具JSON Crack结合内网穿透实现公网访问
401 1
数据可视化工具JSON Crack结合内网穿透实现公网访问
|
SQL 数据管理 BI
SQL Server 有哪些版本?
SQL Server 有哪些版本?
1349 3
|
网络协议 安全 数据安全/隐私保护
|
存储 运维 BI
基于C#-VC-MSSQL开发的全套PACS系统源码 3D PACS系统源码:可实现医学影像获取、存档、观片、处理、打印多项应用
PACS的功能价值在于通过连接不同的影像设备,存储与管理图像,图像的调用与后处理,实现资源共享,降低成本,达到提高工作效率、提升医疗水平的目地;
481 1
基于C#-VC-MSSQL开发的全套PACS系统源码  3D PACS系统源码:可实现医学影像获取、存档、观片、处理、打印多项应用