鸿蒙NEXT开发【@ohos.arkui.componentSnapshot (组件截图)】 ArkTS API

最新推荐文章于 2025-07-31 08:09:16 发布

傲慢的螺蛳粉

最新推荐文章于 2025-07-31 08:09:16 发布

阅读量787

点赞数 11

CC 4.0 BY-SA版权

分类专栏：日志文章标签： harmonyos 鸿蒙鸿蒙系统华为

本文链接：https://blog.youkuaiyun.com/CS9527DND/article/details/142979915

本模块提供获取组件截图的能力，包括已加载的组件的截图和没有加载的组件的截图。组件截图只能够截取组件大小的区域，如果组件的绘制超出了它的区域，或子组件的绘制超出了父组件的区域，这些在组件区域外绘制的内容不会在截图中呈现。兄弟节点堆叠在组件区域内，截图不会显示兄弟组件。

导入模块

import { componentSnapshot } from '@kit.ArkUI';

componentSnapshot.get

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

获取已加载的组件的截图，传入组件的[组件标识]，找到对应组件进行截图。通过回调返回结果。

说明

截图会获取最近一帧的绘制内容。如果在组件触发更新的同时调用截图，更新的渲染内容不会被截取到，截图会返回上一帧的绘制内容。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
id	string	是	目标组件的[组件标识]
callback	[AsyncCallback]<image.[PixelMap]>	是	截图返回结果的回调。
options12+	[SnapshotOptions]	否	截图相关的自定义参数。

错误码ID	错误信息
401	Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed.
100001	Invalid ID.

示例：

说明

直接使用componentSnapshot可能导致实例不明确的问题，建议使用[getUIContext]获取UIContext实例，并使用[getComponentSnapshot]获取绑定实例的componentSnapshot。

import { componentSnapshot } from '@kit.ArkUI';
import { image } from '@kit.ImageKit';

@Entry
@Component
struct SnapshotExample {
  @State pixmap: image.PixelMap | undefined = undefined

  build() {
    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", (error: Error, pixmap: image.PixelMap) => {
            if (error) {
              console.log("error: " + JSON.stringify(error))
              return;
            }
            this.pixmap = pixmap
          }, {scale : 2, waitUntilRenderFinished : true})
        }).margin(10)
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传