【前言】
我们部分场景可能会有这种诉求，将页面中的某个组件进行截图，并将截图展示出来。下面我们介绍下如何在鸿蒙next系统中实现组件截图功能。
1、注册监听组件绘制完成的事件
我们要截图，首先要等组件绘制完成后才进行，否则截出的图片可能是一片空白，实现如下，主要用到的系统接口是inspector.ComponentObserver，其中'img'是Row组件的id，这里主要监听Row组件的draw事件，表示已经绘制完成
private listener:inspector.ComponentObserver = this.getUIContext().getUIInspector().createComponentObserver('img') this.listener.on('draw', () => { // todo 截取组件图片 }) build(){ Row(){ Image($r('app.media.startIcon')).width(100).height(100) Image($r('app.media.startIcon')).width(100).height(100) }.id('img') }2、实现组件截图
在绘制完成的事件里面实现组件截图，代码如下，这里'img'是id，originImg的值是一个PiexelMap对象，可以直接传给Image组件展示，或者做其他操作
this.originImg = await this.getUIContext().getComponentSnapshot().get('img')如果需要对获取的截图进行一些裁剪操作，比如高度裁剪一半，代码实现如下，这里主要用到了offscreenCanvas对象，实现图像裁剪的效果，其中screenCanvasContext.getPixelMap(0,50, viewWidth,viewHeight)，0表示x轴方向不裁剪，50表示y轴方向，从50vp开始裁剪图片。
this.originImg = await this.getUIContext().getComponentSnapshot().get('img') let viewInfo = this.getUIContext().getComponentUtils().getRectangleById('img') let viewWidth = this.getUIContext().px2vp(viewInfo.size.width) let viewHeight = this.getUIContext().px2vp(viewInfo.size.height) let screenCanvas = new OffscreenCanvas(viewWidth, viewHeight) let screenCanvasContext = screenCanvas.getContext('2d', new RenderingContextSettings(true)) screenCanvasContext.drawImage(this.originImg,0,0,viewWidth,viewHeight) this.cropImg = screenCanvasContext.getPixelMap(0,50, viewWidth,viewHeight)实现图片截取的效果如下：
完整的代码实现如下，这里注意下，截取组件图片时，使用了setTimeout函数，这里如果不使用的话会出现截出空白图片的情况。另外，这里的Row组件中的Image图片也可以是网络图片，这里的截图方式，即使是网络图片也能实现截图。这里之所以要做px2vp操作，是因为OffscreenCanvas接收的是vp为单位的数值，而getComponentSnapshot获取的宽高是px为单位的数值
import { inspector } from '@kit.ArkUI'; @Entry @Component struct DrawPage { @State message: string = 'Hello World'; @State originImg:PixelMap|null = null @State cropImg:PixelMap|null = null private listener:inspector.ComponentObserver = this.getUIContext().getUIInspector().createComponentObserver('img') private onDrawComplete = () => { setTimeout(async () => { this.originImg = await this.getUIContext().getComponentSnapshot().get('img') let viewInfo = this.getUIContext().getComponentUtils().getRectangleById('img') let viewWidth = this.getUIContext().px2vp(viewInfo.size.width) let viewHeight = this.getUIContext().px2vp(viewInfo.size.height) let screenCanvas = new OffscreenCanvas(viewWidth, viewHeight) let screenCanvasContext = screenCanvas.getContext('2d', new RenderingContextSettings(true)) screenCanvasContext.drawImage(this.originImg,0,0,viewWidth,viewHeight) this.cropImg = screenCanvasContext.getPixelMap(0,50, viewWidth,viewHeight) },500) } aboutToAppear(): void { this.listener.on('draw', this.onDrawComplete) } build() { Column() { Text('原始组件：') Row(){ Image($r('app.media.startIcon')).width(100).height(100) Image($r('app.media.startIcon')).width(100).height(100) }.id('img') Column().height(20) Text('截取的完整图片：') Image(this.originImg).width(200).height(100) Column().height(20) Text('裁剪一半的图片：') Image(this.cropImg).width(200).height(100) } .height('100%') .width('100%') } }
