当前位置: 首页 > news >正文

鸿蒙初学者学习手册(HarmonyOSNext_API14)_组件截图(@ohos.arkui.componentSnapshot (组件截图) )

前言:

这个模块可以截取组件的图片,无论组件是否已加载。截图只能拍到组件本身的大小区域。 如果组件或其子组件画得超出了自己的区域,超出的部分不会出现在截图中。截图不会拍到与当前组件平级的(兄弟)组件。

模块简介和注意:

- XComponent场景建议:

如果你正在开发一个视频播放器,应该直接从视频画面获取图片,而不是使用组件的截图功能。

- 组件截图注意事项:

如果有一个按钮,但按钮周围有空白,截图时会显示这些空白为透明。
如果给按钮加了一个阴影效果,截图时可能会看到额外的阴影部分。

简单实例

componentSnapshot.get

get(id: string, callback: AsyncCallback<image.PixelMap>, options?: SnapshotOptions): void

参数类型说明
idstring目标组件标识
callbackAsyncCallback<image.PixelMap>回调函数
optionsSnapshotOptions截图相关的自定参数

AsyncCallback

AsyncCallback<T, E = void> {(err: BusinessError<E>, data: T): void;}

参数类型说明
errBusinessError接口调用失败的公共错误信息。
dataT接口调用时的公共回调信息。

options:SnapshotOptions

参数类型说明
scalenumber指定截图时图形侧绘制pixelmap的缩放比。
waitUntilRenderFinishedboolean指定是否强制等待系统执行截图指令前所有绘制指令都执行完成之后再截图。
先对项目中的关键代码进行简单讲解,最后是

导入模块:

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

参数类型说明
builderCustomBuilder自定义组件构建函数。
callbackAsyncCallback<image.PixelMap>截图返回结果的回调。
delaynumber指定触发截图指令的延迟时间。默认值:300单位:毫秒
checkImageStatusboolean指定是否允许在截图之前,校验图片解码状态。
optionsSnapshotOptions截图相关的自定义参数。

AsyncCallback

AsyncCallback<T, E = void> {(err: BusinessError<E>, data: T): void;}

参数类型说明
errBusinessError接口调用失败的公共错误信息。
dataT接口调用时的公共回调信息。

options:SnapshotOptions

参数类型说明
scalenumber指定截图时图形侧绘制pixelmap的缩放比。
waitUntilRenderFinishedboolean指定是否强制等待系统执行截图指令前所有绘制指令都执行完成之后再截图。

导入模块:

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 (组件截图) )

前言&#xff1a; 这个模块可以截取组件的图片&#xff0c;无论组件是否已加载。截图只能拍到组件本身的大小区域。 如果组件或其子组件画得超出了自己的区域&#xff0c;超出的部分不会出现在截图中。截图不会拍到与当前组件平级的&#xff08;兄弟&#xff09;组件。 模块简…...

华为昇腾910b服务器部署DeepSeek翻车现场

最近到祸一台HUAWEI Kunpeng 920 5250&#xff0c;先看看配置。之前是部署的讯飞大模型&#xff0c;发现资源利用率太低了。把5台减少到3台&#xff0c;就出了他 硬件配置信息 基本硬件信息 按照惯例先来看看配置。一共3块盘&#xff0c;500G的系统盘&#xff0c; 2块3T固态…...

[展示]Webrtc NoiseSuppressor降噪模块嵌入式平台移植

最近在尝试把WebRtc的NoiseSuppressor模块移植到嵌入式平台&#xff0c;现在已经移植了&#xff0c;尝试了下效果&#xff0c;降噪效果很显著&#xff0c;噪声带被显著抑制了 降噪前&#xff1a; 降噪后&#xff1a;...

golang内存泄漏

golang也用了好几年了&#xff0c;趁着有空 整理归纳下&#xff0c;以后忘了好看下 一般认为 Go 10次内存泄漏&#xff0c;8次goroutine泄漏&#xff0c;1次是真正内存泄漏&#xff0c;还有1次是cgo导致的内存泄漏 1:环境 go1.20 win10 2:goroutine泄漏 单个Goroutine占用内存&…...

安科瑞能源物联网平台助力企业实现绿色低碳转型

安科瑞顾强 随着全球能源结构的转型和“双碳”目标的推进&#xff0c;能源管理正朝着智能化、数字化的方向快速发展。安科瑞电气股份有限公司推出的微电网智慧能源管理平台&#xff08;EMS 3.0&#xff09;&#xff0c;正是这一趋势下的创新解决方案。该平台集成了物联网&…...

Android Http-server 本地 web 服务

时间&#xff1a;2025年2月16日 地点&#xff1a;深圳.前海湾 需求 我们都知道 webview 可加载 URI&#xff0c;他有自己的协议 scheme&#xff1a; content:// 标识数据由 Content Provider 管理file:// 本地文件 http:// 网络资源 特别的&#xff0c;如果你想直接…...

腾讯的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&#xff0c;10万张算卡体现了马斯克的财大气粗。近年来&#xff0c;人工智能模型取得了长足的发展&#xff0c;每个模型都力求在速度、准确性和成本效率方面超越其他模型。在本文中&#xff0c;我将深入研究比较中美在AI的焦点模型上…...

内外网隔离文件传输解决方案|系统与钉钉集成+等保合规,安全提升70%

一、背景与痛点 在内外网隔离的企业网络环境中&#xff0c;员工与外部协作伙伴&#xff08;如钉钉用户&#xff09;的文件传输面临以下挑战&#xff1a; 1. **安全性风险**&#xff1a;内外网直连可能导致病毒传播、数据泄露。 2. **操作繁琐**&#xff1a;传统方式需频繁切…...

Linux基础开发工具的使用(apt、vim、gcc、g++、gdb、make、makefile)

Linux软件包管理器–apt Linux安装软件的方式 在Linux下安装软件的方法有以下三种&#xff1a; 下载到程序的源代码&#xff0c;自己编译出可执行程序获取deb安装包、然后使用dpkg命令安装。&#xff08;不解决依赖关系&#xff09;通过apt进行安装软件。 小知识点&#xf…...

最新版IDEA下载安装教程

一、下载IDEA 点击前往官网下载 或者去网盘下载 点击前往百度网盘下载 点击前往夸克网盘下载 进去后点击IDEA 然后点击Download 选择自己电脑对应的系统 点击下载 等待下载即可 二、安装IDEA 下载好后双击应用程序 点击下一步 选择好安装目录后点击下一步 勾选这两项后点击…...

MacOS 15.3 卸载系统内置软件

1、关闭系统完整性&#xff08;SIP&#xff09; 进入恢复模式(recovery) 如果您使用的是黑苹果或者白苹果&#xff0c;可以选择 重启按住CommandR 进入&#xff0c;如果是M系列芯片&#xff0c;长按开机键&#xff0c;进入硬盘选择界面进入。 我是MacMini M4芯片&#xff0c;关…...

发现问题 python3.6.13+django3.2.5 只能以asgi启动server 如何解决当前问题

在 Python 3.6.13 和 Django 3.2.5 的组合下&#xff0c;如果你发现只能使用 ASGI 启动 Django 服务&#xff0c;而不能使用 WSGI&#xff0c;可能的原因有几个。我们来分析一下常见的问题和解决方案。 1. 默认 ASGI 支持 从 Django 3.0 开始&#xff0c;Django 引入了对 ASG…...

python3+TensorFlow 2.x(六)自编码器

自动编码器 自动编码器&#xff08;Autoencoder&#xff09;是一种无监督学习算法&#xff0c;主要用于数据降维、特征学习和数据生成等任务。它由编码器和解码器组成&#xff0c;目标是将输入数据压缩为低维表示&#xff08;编码&#xff09;&#xff0c;然后再从这个低维表示…...

Redis-AOF

AOF 前言什么是AOF执行后写入的好处避免额外的检查开销不会阻塞当前写操作命令的执行 潜在风险数据丢失阻塞下一个命令 三种写回策略AOF重写机制AOF后台重写数据副本的生成写时复制写时复制的阻塞问题 AOF重写缓冲区子进程重写期间工作内容 总结 前言 RDB方式不能提供强一致性…...

【DeepSeek】本地部署,保姆级教程

deepseek网站链接传送门&#xff1a;DeepSeek 在这里主要介绍DeepSeek的两种部署方法&#xff0c;一种是调用API&#xff0c;一种是本地部署。 一、API调用 1.进入网址Cherry Studio - 全能的AI助手选择立即下载 2.安装时位置建议放在其他盘&#xff0c;不要放c盘 3.进入软件后…...

并查集算法篇上期:并查集原理及实现

引入 那么我们在介绍我们并查集的原理之前&#xff0c;我们先来看一下并查集所应用的一个场景&#xff1a;那么现在我们有一个长度为n的数组&#xff0c;他们分别属于不同的集合&#xff0c;那么现在我们要查询数组当中某个元素和其他元素是否处于同一集合当中&#xff0c;或者…...

如何在WPS打开的word、excel文件中,使用AI?

1、百度搜索&#xff1a;Office AI官方下载 或者直接打开网址&#xff1a;https://www.office-ai.cn/static/introductions/officeai/smartdownload.html 打开后会直接提示开始下载中&#xff0c;下载完成后会让其选择下载存放位置&#xff1a; 选择位置&#xff0c;然后命名文…...

【Deepseek+Dify】wsl2+docker+Deepseek+Dify部署本地大模型知识库问题总结

wsl2dockerDeepseekDify部署本地大模型知识库问题总结 基于ollama部署本地文本模型和嵌入模型 部署教程 DeepSeekdify 本地知识库&#xff1a;真的太香了 问题贴&#xff1a;启动wsl中docker中的dify相关的容器 发现postgre服务和daemon服务一直在重启&#xff0c;导致前端加…...

C++初阶——简单实现vector

目录 1、前言 2、Vector.h 3、Test.cpp 1、前言 简单实现std::vector类模板。 相较于前面的string&#xff0c;vector要注意&#xff1a; 深拷贝&#xff0c;因为vector的元素可能是类类型&#xff0c;类类型元素可以通过赋值重载&#xff0c;自己实现深拷贝。 迭代器失效…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...