鸿蒙初学者学习手册(HarmonyOSNext_API14)_组件截图(@ohos.arkui.componentSnapshot (组件截图) )
前言:
这个模块可以截取组件的图片,无论组件是否已加载。截图只能拍到组件本身的大小区域。 如果组件或其子组件画得超出了自己的区域,超出的部分不会出现在截图中。截图不会拍到与当前组件平级的(兄弟)组件。
模块简介和注意:
- XComponent场景建议:
如果你正在开发一个视频播放器,应该直接从视频画面获取图片,而不是使用组件的截图功能。
- 组件截图注意事项:
如果有一个按钮,但按钮周围有空白,截图时会显示这些空白为透明。
如果给按钮加了一个阴影效果,截图时可能会看到额外的阴影部分。
简单实例
componentSnapshot.get
get(id: string, callback: AsyncCallback<image.PixelMap>, options?: SnapshotOptions): void
| 参数 | 类型 | 说明 |
|---|---|---|
| id | string | 目标组件标识 |
| callback | AsyncCallback<image.PixelMap> | 回调函数 |
| options | SnapshotOptions | 截图相关的自定参数 |
AsyncCallback
AsyncCallback<T, E = void> {(err: BusinessError<E>, data: T): void;}
| 参数 | 类型 | 说明 |
|---|---|---|
| err | BusinessError | 接口调用失败的公共错误信息。 |
| data | T | 接口调用时的公共回调信息。 |
options:SnapshotOptions
| 参数 | 类型 | 说明 |
|---|---|---|
| scale | number | 指定截图时图形侧绘制pixelmap的缩放比。 |
| waitUntilRenderFinished | boolean | 指定是否强制等待系统执行截图指令前所有绘制指令都执行完成之后再截图。 |
先对项目中的关键代码进行简单讲解,最后是
导入模块:
import { componentSnapshot } from '@kit.ArkUI';:导入 componentSnapshot 函数,用于生成组件的快照。
import { image } from '@kit.ImageKit';:导入 image 对象,用于处理图像。
状态变量:
@State pixmap: image.PixelMap | undefined = undefined:定义一个状态变量 pixmap,用于存储图像像素映射,初始值为 undefined。
UI 结构:
Column():
创建一个垂直排列的容器。
Row():
创建一个水平排列的容器。
Image(this.pixmap):
显示一个 Image 组件,使用状态变量 pixmap 作为图像源,设置宽度和高度为 200 像素,添加黑色边框和外边距。
Image($r('app.media.app_icon')):
显示另一个 Image 组件,使用资源文件 'app.media.app_icon' 作为图像源,自动调整大小,设置宽度和高度为 200 像素,添加外边距,并设置 id 为 "root"。
Button("click to generate UI snapshot"):
创建一个 Button 组件,显示文本 "click to generate UI snapshot",并设置点击事件处理函数。
onClick(() => { ... }):
设置按钮的点击事件处理函数。
componentSnapshot.get("root", (error: Error, pixmap: image.PixelMap) => { ... }, {scale : 2, waitUntilRenderFinished : true}):使用 componentSnapshot.get 方法生成指定 id 的组件快照。
如果生成快照过程中发生错误,打印错误信息并返回。
如果成功生成快照,将生成的像素映射赋值给状态变量 pixmap。
同步执行
// 导入 @kit.ArkUI 模块中的 componentSnapshot 函数,用于生成组件快照
import { componentSnapshot } from '@kit.ArkUI';
// 导入 @kit.ImageKit 模块中的 image 对象,用于处理图像
import { image } from '@kit.ImageKit';// 使用 @Entry 装饰器标记该组件为应用的入口组件
@Entry
// 使用 @Component 装饰器标记该类为一个组件
@Component
// 定义名为 SnapshotExample 的结构化组件
struct SnapshotExample {// 定义一个状态变量 pixmap,用于存储图像像素映射,初始值为 undefined@State pixmap: image.PixelMap | undefined = undefined// 定义组件的构建方法,用于描述组件的 UI 结构build() {// 创建一个垂直排列的容器 ColumnColumn() {// 创建一个水平排列的容器 RowRow() {// 显示一个 Image 组件,使用状态变量 pixmap 作为图像源,设置宽度和高度为 200 像素,添加黑色边框和外边距Image(this.pixmap).width(200).height(200).border({ color: Color.Black, width: 2 }).margin(5)// 显示另一个 Image 组件,使用资源文件 'app.media.app_icon' 作为图像源,自动调整大小,设置宽度和高度为 200 像素,添加外边距,并设置 id 为 "root"Image($r('app.media.app_icon')).autoResize(true).width(200).height(200).margin(5).id("root")}// 创建一个 Button 组件,显示文本 "click to generate UI snapshot",并设置点击事件处理函数Button("click to generate UI snapshot").onClick(() => {// 使用 componentSnapshot.get 方法生成指定 id 的组件快照componentSnapshot.get("root",(error: Error, pixmap: image.PixelMap) => {// 如果生成快照过程中发生错误,打印错误信息并返回if (error) {console.log("error: " + JSON.stringify(error))return;}// 如果成功生成快照,将生成的像素映射赋值给状态变量 pixmapthis.pixmap = pixmap}, {scale : 2, waitUntilRenderFinished : true})}).margin(10)}// 设置 Column 容器的宽度为 100%.width('100%')// 设置 Column 容器的高度为 100%.height('100%')// 设置 Column 容器的子组件水平对齐方式为居中.alignItems(HorizontalAlign.Center)}
}
异步执行
import { componentSnapshot } from '@kit.ArkUI';
import { image } from '@kit.ImageKit';@Entry
@Component
struct SnapshotExample {@State pixmap: image.PixelMap | undefined = undefinedbuild() {Column() {Row() {Image(this.pixmap).width(200).height(200).border({ color: Color.Black, width: 2 }).margin(5)Image($r('app.media.img')).autoResize(true).width(200).height(200).margin(5).id("root")}Button("click to generate UI snapshot").onClick(() => {// 建议使用this.getUIContext().getComponentSnapshot().get()componentSnapshot.get("root", {scale : 2, waitUntilRenderFinished : true}).then((pixmap: image.PixelMap) => {this.pixmap = pixmap}).catch((err:Error) => {console.log("error: " + err)})}).margin(10)}.width('100%').height('100%').alignItems(HorizontalAlign.Center)}
}
componentSnapshot.createFromBuilder
createFromBuilder(builder: CustomBuilder, callback: AsyncCallback<image.PixelMap>, delay?: number, checkImageStatus?: boolean, options?: SnapshotOptions): void
| 参数 | 类型 | 说明 |
|---|---|---|
| builder | CustomBuilder | 自定义组件构建函数。 |
| callback | AsyncCallback<image.PixelMap> | 截图返回结果的回调。 |
| delay | number | 指定触发截图指令的延迟时间。默认值:300单位:毫秒 |
| checkImageStatus | boolean | 指定是否允许在截图之前,校验图片解码状态。 |
| options | SnapshotOptions | 截图相关的自定义参数。 |
AsyncCallback
AsyncCallback<T, E = void> {(err: BusinessError<E>, data: T): void;}
| 参数 | 类型 | 说明 |
|---|---|---|
| err | BusinessError | 接口调用失败的公共错误信息。 |
| data | T | 接口调用时的公共回调信息。 |
options:SnapshotOptions
| 参数 | 类型 | 说明 |
|---|---|---|
| scale | number | 指定截图时图形侧绘制pixelmap的缩放比。 |
| waitUntilRenderFinished | boolean | 指定是否强制等待系统执行截图指令前所有绘制指令都执行完成之后再截图。 |
导入模块:
import { componentSnapshot } from ‘@kit.ArkUI’;:导入 componentSnapshot 函数,用于生成组件的快照。
import { image } from ‘@kit.ImageKit’;:导入 image 对象,用于处理图像。
状态变量:
@State pixmap: image.PixelMap | undefined = undefined:定义一个状态变量 pixmap,用于存储图像像素映射,初始值为 undefined。
同步执行
// 导入 @kit.ArkUI 模块中的 componentSnapshot 函数,用于生成组件快照
import { componentSnapshot } from '@kit.ArkUI';
// 导入 @kit.ImageKit 模块中的 image 对象,用于处理图像
import { image } from '@kit.ImageKit';// 使用 @Entry 装饰器标记该组件为应用的入口组件
@Entry
// 使用 @Component 装饰器标记该类为一个组件
@Component
// 定义名为 OffscreenSnapshotExample 的结构化组件
struct OffscreenSnapshotExample {// 定义一个状态变量 pixmap,用于存储图像像素映射,初始值为 undefined@State pixmap: image.PixelMap | undefined = undefined// 定义一个构建器方法 RandomBuilder,用于生成随机内容的 UI 结构@BuilderRandomBuilder() {// 创建一个垂直排列的 Flex 容器,设置主轴对齐方式为居中,交叉轴对齐方式为居中Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {// 显示一个 Text 组件,显示文本 'Test menu item 1',设置字体大小为 20 像素,宽度为 100 像素,高度为 50 像素,文本对齐方式为居中Text('Test menu item 1').fontSize(20).width(100).height(50).textAlign(TextAlign.Center)// 显示一个 Divider 组件,设置高度为 10 像素Divider().height(10)// 显示另一个 Text 组件,显示文本 'Test menu item 2',设置字体大小为 20 像素,宽度为 100 像素,高度为 50 像素,文本对齐方式为居中Text('Test menu item 2').fontSize(20).width(100).height(50).textAlign(TextAlign.Center)}// 设置 Flex 容器的宽度为 100 像素,并设置 id 为 "builder".width(100).id("builder")}// 定义组件的构建方法,用于描述组件的 UI 结构build() {// 创建一个垂直排列的 Column 容器Column() {// 创建一个 Button 组件,显示文本 "click to generate offscreen UI snapshot",并设置点击事件处理函数Button("click to generate offscreen UI snapshot").onClick(() => {// 使用 componentSnapshot.createFromBuilder 方法生成指定构建器的快照componentSnapshot.createFromBuilder(() => { this.RandomBuilder() }, // 提供构建器方法(error: Error, pixmap: image.PixelMap) => { // 回调函数处理生成的快照或错误// 如果生成快照过程中发生错误,打印错误信息并返回if (error) {console.log("error: " + JSON.stringify(error))return;}// 如果成功生成快照,将生成的像素映射赋值给状态变量 pixmapthis.pixmap = pixmap// 保存 pixmap 到文件(此处注释掉)// ....// 获取组件的尺寸和位置信息let info = this.getUIContext().getComponentUtils().getRectangleById("builder")// 打印组件的宽度、高度以及不同坐标系下的位置信息console.log(info.size.width + ' ' + info.size.height + ' ' + info.localOffset.x + ' ' + info.localOffset.y + ' ' + info.windowOffset.x + ' ' + info.windowOffset.y)},320, // 设置生成快照的宽度为 320 像素true, // 设置是否使用硬件加速{ scale: 2, waitUntilRenderFinished: true } // 设置缩放比例为 2,等待渲染完成后再生成快照)})// 显示一个 Image 组件,使用状态变量 pixmap 作为图像源,设置外边距为 10 像素,高度为 200 像素,宽度为 200 像素,添加黑色边框Image(this.pixmap).margin(10).height(200).width(200).border({ color: Color.Black, width: 2 })}// 设置 Column 容器的宽度为 100%,设置外边距为左 10 像素,上 5 像素,下 5 像素,设置高度为 300 像素.width('100%').margin({ left: 10, top: 5, bottom: 5 }).height(300)}
}相关文章:
鸿蒙初学者学习手册(HarmonyOSNext_API14)_组件截图(@ohos.arkui.componentSnapshot (组件截图) )
前言: 这个模块可以截取组件的图片,无论组件是否已加载。截图只能拍到组件本身的大小区域。 如果组件或其子组件画得超出了自己的区域,超出的部分不会出现在截图中。截图不会拍到与当前组件平级的(兄弟)组件。 模块简…...
华为昇腾910b服务器部署DeepSeek翻车现场
最近到祸一台HUAWEI Kunpeng 920 5250,先看看配置。之前是部署的讯飞大模型,发现资源利用率太低了。把5台减少到3台,就出了他 硬件配置信息 基本硬件信息 按照惯例先来看看配置。一共3块盘,500G的系统盘, 2块3T固态…...
[展示]Webrtc NoiseSuppressor降噪模块嵌入式平台移植
最近在尝试把WebRtc的NoiseSuppressor模块移植到嵌入式平台,现在已经移植了,尝试了下效果,降噪效果很显著,噪声带被显著抑制了 降噪前: 降噪后:...
golang内存泄漏
golang也用了好几年了,趁着有空 整理归纳下,以后忘了好看下 一般认为 Go 10次内存泄漏,8次goroutine泄漏,1次是真正内存泄漏,还有1次是cgo导致的内存泄漏 1:环境 go1.20 win10 2:goroutine泄漏 单个Goroutine占用内存&…...
安科瑞能源物联网平台助力企业实现绿色低碳转型
安科瑞顾强 随着全球能源结构的转型和“双碳”目标的推进,能源管理正朝着智能化、数字化的方向快速发展。安科瑞电气股份有限公司推出的微电网智慧能源管理平台(EMS 3.0),正是这一趋势下的创新解决方案。该平台集成了物联网&…...
Android Http-server 本地 web 服务
时间:2025年2月16日 地点:深圳.前海湾 需求 我们都知道 webview 可加载 URI,他有自己的协议 scheme: content:// 标识数据由 Content Provider 管理file:// 本地文件 http:// 网络资源 特别的,如果你想直接…...
腾讯的webUI怎样实现deepseek外部调用 ; 腾讯云通过API怎样调用deepseek
腾讯的webUI怎样实现deepseek外部调用 目录 腾讯的webUI怎样实现deepseek外部调用腾讯云通过API怎样调用deepseekhtml方式curl方式python方式腾讯云通过API怎样调用deepseek 重点说明:不需要SK,仅仅使用ip和端口号 html方式 <!DOCTYPE html> <html lang="e…...
DeepSeek VS ChatGPT-速度、准确性和成本
撰写本文时马斯克刚刚发布了聊天机器人Grok2,10万张算卡体现了马斯克的财大气粗。近年来,人工智能模型取得了长足的发展,每个模型都力求在速度、准确性和成本效率方面超越其他模型。在本文中,我将深入研究比较中美在AI的焦点模型上…...
内外网隔离文件传输解决方案|系统与钉钉集成+等保合规,安全提升70%
一、背景与痛点 在内外网隔离的企业网络环境中,员工与外部协作伙伴(如钉钉用户)的文件传输面临以下挑战: 1. **安全性风险**:内外网直连可能导致病毒传播、数据泄露。 2. **操作繁琐**:传统方式需频繁切…...
Linux基础开发工具的使用(apt、vim、gcc、g++、gdb、make、makefile)
Linux软件包管理器–apt Linux安装软件的方式 在Linux下安装软件的方法有以下三种: 下载到程序的源代码,自己编译出可执行程序获取deb安装包、然后使用dpkg命令安装。(不解决依赖关系)通过apt进行安装软件。 小知识点…...
最新版IDEA下载安装教程
一、下载IDEA 点击前往官网下载 或者去网盘下载 点击前往百度网盘下载 点击前往夸克网盘下载 进去后点击IDEA 然后点击Download 选择自己电脑对应的系统 点击下载 等待下载即可 二、安装IDEA 下载好后双击应用程序 点击下一步 选择好安装目录后点击下一步 勾选这两项后点击…...
MacOS 15.3 卸载系统内置软件
1、关闭系统完整性(SIP) 进入恢复模式(recovery) 如果您使用的是黑苹果或者白苹果,可以选择 重启按住CommandR 进入,如果是M系列芯片,长按开机键,进入硬盘选择界面进入。 我是MacMini M4芯片,关…...
发现问题 python3.6.13+django3.2.5 只能以asgi启动server 如何解决当前问题
在 Python 3.6.13 和 Django 3.2.5 的组合下,如果你发现只能使用 ASGI 启动 Django 服务,而不能使用 WSGI,可能的原因有几个。我们来分析一下常见的问题和解决方案。 1. 默认 ASGI 支持 从 Django 3.0 开始,Django 引入了对 ASG…...
python3+TensorFlow 2.x(六)自编码器
自动编码器 自动编码器(Autoencoder)是一种无监督学习算法,主要用于数据降维、特征学习和数据生成等任务。它由编码器和解码器组成,目标是将输入数据压缩为低维表示(编码),然后再从这个低维表示…...
Redis-AOF
AOF 前言什么是AOF执行后写入的好处避免额外的检查开销不会阻塞当前写操作命令的执行 潜在风险数据丢失阻塞下一个命令 三种写回策略AOF重写机制AOF后台重写数据副本的生成写时复制写时复制的阻塞问题 AOF重写缓冲区子进程重写期间工作内容 总结 前言 RDB方式不能提供强一致性…...
【DeepSeek】本地部署,保姆级教程
deepseek网站链接传送门:DeepSeek 在这里主要介绍DeepSeek的两种部署方法,一种是调用API,一种是本地部署。 一、API调用 1.进入网址Cherry Studio - 全能的AI助手选择立即下载 2.安装时位置建议放在其他盘,不要放c盘 3.进入软件后…...
并查集算法篇上期:并查集原理及实现
引入 那么我们在介绍我们并查集的原理之前,我们先来看一下并查集所应用的一个场景:那么现在我们有一个长度为n的数组,他们分别属于不同的集合,那么现在我们要查询数组当中某个元素和其他元素是否处于同一集合当中,或者…...
如何在WPS打开的word、excel文件中,使用AI?
1、百度搜索:Office AI官方下载 或者直接打开网址:https://www.office-ai.cn/static/introductions/officeai/smartdownload.html 打开后会直接提示开始下载中,下载完成后会让其选择下载存放位置: 选择位置,然后命名文…...
【Deepseek+Dify】wsl2+docker+Deepseek+Dify部署本地大模型知识库问题总结
wsl2dockerDeepseekDify部署本地大模型知识库问题总结 基于ollama部署本地文本模型和嵌入模型 部署教程 DeepSeekdify 本地知识库:真的太香了 问题贴:启动wsl中docker中的dify相关的容器 发现postgre服务和daemon服务一直在重启,导致前端加…...
C++初阶——简单实现vector
目录 1、前言 2、Vector.h 3、Test.cpp 1、前言 简单实现std::vector类模板。 相较于前面的string,vector要注意: 深拷贝,因为vector的元素可能是类类型,类类型元素可以通过赋值重载,自己实现深拷贝。 迭代器失效…...
华为云AI开发平台ModelArts
华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表?1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
Zustand 状态管理库:极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库,特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
Frozen-Flask :将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是:将一个 Flask Web 应用生成成纯静态 HTML 文件,从而可以部署到静态网站托管服务上,如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...
srs linux
下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935,SRS管理页面端口是8080,可…...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用,通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试,通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况,可以通过以下几种方式模拟或触发: 1. 增加CPU负载 运行大量计算密集型任务,例如: 使用多线程循环执行复杂计算(如数学运算、加密解密等)。运行图…...
代码规范和架构【立芯理论一】(2025.06.08)
1、代码规范的目标 代码简洁精炼、美观,可持续性好高效率高复用,可移植性好高内聚,低耦合没有冗余规范性,代码有规可循,可以看出自己当时的思考过程特殊排版,特殊语法,特殊指令,必须…...
日常一水C
多态 言简意赅:就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过,当子类和父类的函数名相同时,会隐藏父类的同名函数转而调用子类的同名函数,如果要调用父类的同名函数,那么就需要对父类进行引用&#…...
深入理解Optional:处理空指针异常
1. 使用Optional处理可能为空的集合 在Java开发中,集合判空是一个常见但容易出错的场景。传统方式虽然可行,但存在一些潜在问题: // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...
