鸿蒙初学者学习手册(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的元素可能是类类型,类类型元素可以通过赋值重载,自己实现深拷贝。 迭代器失效…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API,用于在函数组件中使用 state 和其他 React 特性(例如生命周期方法、context 等)。Hooks 通过简洁的函数接口,解决了状态与 UI 的高度解耦,通过函数式编程范式实现更灵活 Rea…...
大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用,操作系统:Ubuntu24.04,Neofj版本:2025.04.0。 Apt安装 Neofj可以进行官网安装:Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
【JVM】- 内存结构
引言 JVM:Java Virtual Machine 定义:Java虚拟机,Java二进制字节码的运行环境好处: 一次编写,到处运行自动内存管理,垃圾回收的功能数组下标越界检查(会抛异常,不会覆盖到其他代码…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...
测试markdown--肇兴
day1: 1、去程:7:04 --11:32高铁 高铁右转上售票大厅2楼,穿过候车厅下一楼,上大巴车 ¥10/人 **2、到达:**12点多到达寨子,买门票,美团/抖音:¥78人 3、中饭&a…...
基于数字孪生的水厂可视化平台建设:架构与实践
分享大纲: 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年,数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段,基于数字孪生的水厂可视化平台的…...
EtherNet/IP转DeviceNet协议网关详解
一,设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络,本网关连接到EtherNet/IP总线中做为从站使用,连接到DeviceNet总线中做为从站使用。 在自动…...
如何理解 IP 数据报中的 TTL?
目录 前言理解 前言 面试灵魂一问:说说对 IP 数据报中 TTL 的理解?我们都知道,IP 数据报由首部和数据两部分组成,首部又分为两部分:固定部分和可变部分,共占 20 字节,而即将讨论的 TTL 就位于首…...
Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明:这是一个机器学习实战项目(附带数据代码文档),如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下,风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...
