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

【HarmonyOS】鸿蒙应用实现截屏

news 2025/7/14 20:45:58

【HarmonyOS】鸿蒙应用实现截屏

组件截屏

在这里插入图片描述
通过componentSnapshot的get函数，将需要截图的组件设置id传进去即可。

import { componentSnapshot } from '@kit.ArkUI';
import { image } from '@kit.ImageKit';/*** 截图*/
@Entry
@Component
@Preview
struct SnapShotPage {@State mImageSnapShot: image.PixelMap | null = null;@Styles ImgStyle(){.size({width: px2vp(350),height: px2vp(350)})}build() {Column(){Blank()// 参照图片Image($r("app.media.icon_img")).ImgStyle().id("target").autoResize(true)Blank()// 展示截图Image(this.mImageSnapShot).ImgStyle().backgroundColor(Color.Blue)Blank()Button("点击截图参照图片控件").onClick(()=>{componentSnapshot.get("target", (error: Error, pixmap: image.PixelMap)=>{if (error) {console.log("SnapShotDebug", "error: " + JSON.stringify(error));return;}console.log("SnapShotDebug", "pixmap: " + JSON.stringify(pixmap));this.mImageSnapShot = pixmap;});})Blank()}.size({width: "100%",height: "100%"})}
}

示例效果请以真机运行为准，当前 IDE 预览器不支持。

流媒体截屏

对于使用XComponent的场景，例如：Video或者相机流媒体展示类组件，不建议使用组件截图相关接口，建议从surface直接获取图片。效率更高些。

  private cutImage(surfaceId: string){let region: image.Region = { x: 0, y: 0, size: { height: 100, width: 100 } };image.createPixelMapFromSurface(surfaceId, region).then(() => {console.info("SnapShotDebug", 'Succeeded in creating pixelmap from Surface');}).catch((error: BusinessError) => {console.error("SnapShotDebug", `Failed to create pixelmap. code is ${error.code}, message is ${error.message}`);});}