【HarmonyOS】鸿蒙应用实现截屏
组件截屏
通过componentSnapshot的get函数,将需要截图的组件设置id传进去即可。
import { componentSnapshot } from '@kit.ArkUI';
import { image } from '@kit.ImageKit';/*** 截图*/
struct SnapShotPage { mImageSnapShot: image.PixelMap | null = null; 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}`);});}
关于如何屏蔽截屏行为,参见这篇文章。设置当前需要屏蔽截屏业务的容器窗口为,隐私窗口即可。【HarmonyOS】应用屏蔽截屏和录屏