本文是「鸿蒙 6.1 API 23 开发坑系列」第 2 篇ArkUI 桶第 2 篇。本篇讲ohos.arkui.componentSnapshotnamespaceAPI 10鸿蒙 6.1 API 23 基座——组件截图三个方法get/getSync/createFromBuilder。鸿蒙坑根因①import坑——import { componentSnapshot } from编译错has no exported member必须import componentSnapshot fromdefault import② 返回值坑——get(id)返回Promiseimage.PixelMap不是dataURL字符串React html2canvas 返回 dataURLimage.PixelMap是像素图有getImageInfo/getPixelBytes可读像素③createFromBuilder(builder)的 builder 参数是CustomBuilderBuilder装饰的函数不是 Component。一、开篇鸿蒙 componentSnapshot 不是 html2canvas是「返回 PixelMap 像素图」你写 React 时组件截图用html2canvas返回 canvas → toDataURL 转 dataURL 字符串// React html2canvas返回 canvas → toDataURL 转 dataURL 字符串 async function snapshotComponent() { // ❌ html2canvas 返回 HTMLCanvasElementtoDataURL() 转 dataURL 字符串 const canvas: HTMLCanvasElement await html2canvas(document.getElementById(target)) const dataURL: string canvas.toDataURL(image/jpeg, 0.9) // ❌ dataURL 字符串 // ❌ React html2canvas返回 canvas → dataURL 字符串不是 PixelMap 像素图 }你写鸿蒙 ArkTS 时组件截图用componentSnapshot.get(id)返回Promiseimage.PixelMap像素图// ArkTS componentSnapshot返回 Promiseimage.PixelMap 像素图不是 dataURL 字符串 import componentSnapshot from ohos.arkui.componentSnapshot // ✅ default import import image from ohos.multimedia.image async function snapshotComponent() { // ✅ get(id) 返回 Promiseimage.PixelMapimage.PixelMap 是像素图不是 dataURL const pixelMap: image.PixelMap await componentSnapshot.get(snapshotTarget) const imageInfo: image.ImageInfo await pixelMap.getImageInfo() // ✅ PixelMap 有 getImageInfo/getPixelBytes 可读像素不是 dataURL 字符串 const width: number imageInfo.size.width const height: number imageInfo.size.height }React html2canvas vs 鸿蒙 componentSnapshot 的区别React 把组件截图当 canvas 转 dataURLhtml2canvas 返回 HTMLCanvasElement toDataURL() 转 dataURL 字符串base64 编码字符串ArkTS 把组件截图当 PixelMap 像素图componentSnapshot.get 返回 Promiseimage.PixelMapimage.PixelMap 是像素图有 getImageInfo/getPixelBytes 可读像素不是 dataURL 字符串。根因不是 dataURL 字符串是 PixelMap 像素图——鸿蒙返回 image.PixelMap 像素图有 getImageInfo/getPixelBytes 可读像素。二、根因鸿蒙 componentSnapshot 的三个绑定机制鸿蒙ohos.arkui.componentSnapshotnamespaceAPI 10有三个截图方法每个返回image.PixelMap像素图。绑定机制来自三重根因。机制 1import 坑——default import 不是 named import鸿蒙坑根因import { componentSnapshot } from编译错——必须import componentSnapshot from// ❌ 鸿蒙坑import { componentSnapshot } from 编译错has no exported member // ❌ 编译错Module ohos.arkui.componentSnapshot has no exported member componentSnapshot // ❌ 错误信息Did you mean to use import componentSnapshot from ohos.arkui.componentSnapshot instead? import { componentSnapshot } from ohos.arkui.componentSnapshot // ❌ named import 编译错 // ✅ 正确用法default importcomponentSnapshot 是 default export 不是 named export import componentSnapshot from ohos.arkui.componentSnapshot // ✅ default import // 鸿蒙坑根因componentSnapshot 是 default export必须 default import 不是 named importimport 坑根因ohos.arkui.componentSnapshot的componentSnapshot是declare namespacedefault namespace export不是 named export所以import { componentSnapshot }触发has no exported member componentSnapshot编译错。正确用法是import componentSnapshot fromdefault import。机制 2get 返回 Promiseimage.PixelMap 不是 dataURL 字符串鸿蒙坑根因get(id)返回Promiseimage.PixelMap像素图不是 dataURL 字符串// ✅ get(id): Promiseimage.PixelMap 异步截图返回 Promiseimage.PixelMap不是 dataURL import componentSnapshot from ohos.arkui.componentSnapshot import image from ohos.multimedia.image async function asyncSnapshot() { // ✅ get(id) 返回 Promiseimage.PixelMapimage.PixelMap 是像素图不是 dataURL const pixelMap: image.PixelMap await componentSnapshot.get(snapshotTarget) // ✅ PixelMap 有 getImageInfo/getPixelBytes 可读像素 const imageInfo: image.ImageInfo await pixelMap.getImageInfo() const width: number imageInfo.size.width const height: number imageInfo.size.height // 鸿蒙坑根因get 返回 Promiseimage.PixelMap 像素图React html2canvas 返回 dataURL 字符串 } // ✅ getSync(id): image.PixelMap 同步截图API 12直接返回不用 await function syncSnapshot() { // ✅ getSync 是 API 12 同步方法直接返回 image.PixelMap 不用 await const pixelMap: image.PixelMap componentSnapshot.getSync(snapshotTarget) // 鸿蒙坑getSync 是 API 12 同步方法不是 Promise 不用 await }get vs getSync 的区别get(id): Promiseimage.PixelMap异步截图API 10返回 Promise 需要 awaitgetSync(id): image.PixelMap同步截图API 12直接返回 image.PixelMap 不用 await不是 Promise。鸿蒙坑getSync 是 API 12 同步方法不是 Promise 不用 await直接返回 image.PixelMap。image.PixelMap vs dataURL 的区别image.PixelMap是鸿蒙像素图接口有 getImageInfo/getPixelBytes 可读像素release 释放资源dataURL是 base64 编码字符串React html2canvas 返回无 getImageInfo/getPixelBytes。根因不是 dataURL 字符串是 PixelMap 像素图——鸿蒙返回 image.PixelMap 像素图有 getImageInfo/getPixelBytes 可读像素。机制 3createFromBuilder(builder) 的 builder 参数是 CustomBuilder 不是 Component鸿蒙坑根因createFromBuilder(builder)的 builder 参数是CustomBuilderBuilder装饰的函数不是 Component// ✅ createFromBuilder(builder) 从 CustomBuilder 截图builder 参数是 Builder 函数不是 Component import componentSnapshot from ohos.arkui.componentSnapshot // ✅ Builder 装饰的函数是 CustomBuilder 类型createFromBuilder 的 builder 参数 Builder function MySnapshotBuilder() { Column({ space: 4 }) { Text(CustomBuilder 截图内容).fontSize(14).fontColor(#28a745) } .padding(12).backgroundColor(#d4edda).borderRadius(8) } async function builderSnapshot() { // ✅ createFromBuilder(builder) 返回 Promiseimage.PixelMap // ✅ 鸿蒙坑builder 参数是 CustomBuilderBuilder 函数不是 Component const pixelMap: image.PixelMap await componentSnapshot.createFromBuilder(MySnapshotBuilder) // 鸿蒙坑根因builder 参数是 CustomBuilderBuilder 装饰的函数不是 Component }createFromBuilder 的 builder 参数坑createFromBuilder(builder: CustomBuilder, ...)的 builder 参数是CustomBuilder类型Builder装饰的函数引用不是 Component 实例不是 build() 返回值。鸿蒙坑传 Component 实例或 build() 返回值会类型错——必须传Builder装饰的函数引用MySnapshotBuilder不是MySnapshotBuilder()。三、真机配图鸿蒙 arkui.componentSnapshot 组件截图坑——get/getSync/createFromBuilder真机配图展示鸿蒙 arkui.componentSnapshot 组件截图坑初始态鸿蒙 6.1 arkui.componentSnapshot 组件截图坑标题截图目标组件红框 idsnapshotTarget四角文字左上/右上/左下/右下场景1~4 卡片get/getSync/createFromBuilder/截图存文件要点说明get(id) 异步截图态点击「① get(id) 异步截图」按钮snapshotStatus 显示「✅ componentSnapshot.get(id) 异步截图成功PixelMap 1066x278」截图次数 1——get 返回 Promiseimage.PixelMap 验证getSync(id) 同步截图态点击「② getSync(id) 同步截图」按钮syncSnapshotStatus 显示「✅ componentSnapshot.getSync(id) 同步截图成功返回 image.PixelMap不用 await」截图次数 2——getSync 同步返回 image.PixelMap 验证createFromBuilder 态点击「③ createFromBuilder 截图」按钮builderSnapshotStatus 显示「✅ createFromBuilder(builder) 截图成功PixelMap 393x78」截图次数 3——createFromBuilder 从 CustomBuilder 截图验证截图存文件态点击「⑦ 截图存文件」按钮savedFilePath 显示「/data/storage/…/cache/snapshot_*.jpeg」截图次数 4——PixelMap 存文件验证image.createImagePacker fs.writeSync四、真解法鸿蒙 componentSnapshot 的三个场景场景 1get(id) 异步截图 getSync(id) 同步截图——90% 场景首选get/getSync 截图用componentSnapshot.get(id)componentSnapshot.getSync(id)// ✅ 场景 1get(id) 异步截图 getSync(id) 同步截图API 10/1290% 场景首选 import componentSnapshot from ohos.arkui.componentSnapshot // ✅ default import import image from ohos.multimedia.image // ✅ get(id): Promiseimage.PixelMap 异步截图API 10返回 Promise 需要 await async function asyncSnapshot() { const pixelMap: image.PixelMap await componentSnapshot.get(snapshotTarget) const imageInfo: image.ImageInfo await pixelMap.getImageInfo() // PixelMap 像素图getImageInfo 读尺寸getPixelBytes 读像素 } // ✅ getSync(id): image.PixelMap 同步截图API 12直接返回不用 await function syncSnapshot() { const pixelMap: image.PixelMap componentSnapshot.getSync(snapshotTarget) // getSync 同步返回 image.PixelMap不是 Promise 不用 await } // get/getSync 截图90% 场景首选返回 image.PixelMap 像素图不是 dataURL鸿蒙 componentSnapshot API 真名坑import componentSnapshot from ohos.arkui.componentSnapshotdefault import 不是 named importget(id: string, callback?: AsyncCallbackimage.PixelMap, options?: SnapshotOptions): void异步截图API 10callback 可选get(id: string, options?: SnapshotOptions): Promiseimage.PixelMapPromise 异步截图API 10返回 Promiseimage.PixelMapgetSync(id: string, options?: SnapshotOptions): image.PixelMap同步截图API 12直接返回 image.PixelMapimage.PixelMap像素图接口getImageInfo/getPixelBytes/releaseSysCapSystemCapability.ArkUI.ArkUI.Fullcrossplatform跨平台atomicservice原子化服务SnapshotOptionsAPI 15SnapshotRegion/left/right/top/bottom 矩形区域截图。场景 2createFromBuilder(builder) 从 CustomBuilder 截图createFromBuilder 截图用componentSnapshot.createFromBuilder(MyBuilder)Builder装饰函数// ✅ 场景 2createFromBuilder(builder) 从 CustomBuilder 截图API 10 import componentSnapshot from ohos.arkui.componentSnapshot // ✅ Builder 装饰的函数是 CustomBuilder 类型createFromBuilder 的 builder 参数 Builder function MySnapshotBuilder() { Column({ space: 4 }) { Text(CustomBuilder 截图内容).fontSize(14).fontColor(#28a745).fontWeight(FontWeight.Bold) Text(createFromBuilder 从 Builder 截图).fontSize(10).fontColor(#888) } .padding(12).backgroundColor(#d4edda).borderRadius(8) } async function builderSnapshot() { // ✅ createFromBuilder(builder) 返回 Promiseimage.PixelMap // ✅ 鸿蒙坑builder 参数是 CustomBuilderBuilder 函数引用不是 Component 实例 const pixelMap: image.PixelMap await componentSnapshot.createFromBuilder(MySnapshotBuilder) // ✅ createFromBuilder 也有 callback 和 delay/checkImageStatus/options 参数 // componentSnapshot.createFromBuilder(MyBuilder, 500, true, options) // delay500ms, checkImageStatustrue } // createFromBuilder 从 CustomBuilder 截图builder 参数是 Builder 函数引用不是 Component鸿蒙 createFromBuilder API 真名坑createFromBuilder(builder: CustomBuilder, callback?: AsyncCallbackimage.PixelMap, delay?: number, checkImageStatus?: boolean, options?: SnapshotOptions): voidcallback 异步API 10createFromBuilder(builder: CustomBuilder, delay?: number, checkImageStatus?: boolean, options?: SnapshotOptions): Promiseimage.PixelMapPromise 异步API 10CustomBuilder是Builder装饰的函数类型传函数引用MyBuilder不是调用MyBuilder()delay延迟截图毫秒数等组件渲染完checkImageStatus检查图片状态true 等图片加载完再截图鸿蒙坑builder 参数传 Component 实例或 build() 返回值会类型错——必须传Builder装饰的函数引用。场景 3PixelMap 存文件——image.createImagePacker fs.writeSyncPixelMap 存文件用image.createImagePacker().packing()打包 JPEG buffer fs.writeSync写文件// ✅ 场景 3PixelMap 存文件——image.createImagePacker fs.writeSyncAPI 10 import componentSnapshot from ohos.arkui.componentSnapshot import image from ohos.multimedia.image import fs from ohos.file.fs async function snapshotAndSave() { // ✅ get(id) 截图返回 PixelMap const pixelMap: image.PixelMap await componentSnapshot.get(snapshotTarget) // ✅ image.createImagePacker() 打包 PixelMap 为 JPEG buffer const imagePacker: image.ImagePacker image.createImagePacker() const jpegBuffer: ArrayBuffer await imagePacker.packing(pixelMap, { format: image/jpeg, // ✅ format: image/jpeg 不是 jpeg quality: 90 // ✅ quality: 0-100 }) imagePacker.release() // ✅ release 释放 ImagePacker // ✅ fs.openSync 打开文件 fs.writeSync 写 buffer fs.closeSync 关文件 const context getContext(this) // ✅ getContext 获取 Contextdeprecated 警告但仍可用 const cacheDir: string context.cacheDir // ✅ cacheDir 缓存目录 const filePath: string cacheDir /snapshot_ Date.now() .jpeg const fileFd: number fs.openSync(filePath, fs.OpenMode.CREATE | fs.OpenMode.WRITE_ONLY).fd // ✅ .fd 取文件描述符 fs.writeSync(fileFd, jpegBuffer) // ✅ writeSync(fd, buffer) 第一参传 fd fs.closeSync(fileFd) // ✅ closeSync(fd) 关文件 } // PixelMap 存文件image.createImagePacker().packing JPEG buffer fs.writeSync(fd, buffer)鸿蒙 PixelMap 存文件 API 真名坑image.createImagePacker(): image.ImagePacker创建打包器API 10imagePacker.packing(pixelMap, options?: image.PackingOption): PromiseArrayBuffer打包 PixelMap 为 bufferAPI 10PackingOption{ format: image/jpeg, quality: 90 }format 是image/jpeg不是jpegquality 0-100imagePacker.release()释放打包器fs.openSync(path, mode): fs.File同步打开文件API 10.fd取文件描述符fs.writeSync(fd: number, buffer: ArrayBuffer)同步写 bufferAPI 10第一参传 fd 文件描述符不是 File 实例fs.closeSync(fd: number)同步关文件鸿蒙坑fs.writeSync第一参传file.fd文件描述符不是 File 实例方法是 namespace 顶层函数getContext(this)已 deprecated 警告但仍可用推荐用this.getContext()或组件 Context。五、一句话哲学写鸿蒙 ArkUI 记住componentSnapshot 不是 html2canvas 是「返回 image.PixelMap 像素图」——鸿蒙 6.1 API 23ohos.arkui.componentSnapshotnamespaceAPI 10鸿蒙 6.1 API 23 基座SysCap SystemCapability.ArkUI.ArkUI.Fullcrossplatform atomicservice。根因不是 dataURL 字符串是 PixelMap 像素图——import componentSnapshot from✅ default import❌import { componentSnapshot } from编译错has no exported memberget(id): Promiseimage.PixelMap异步截图API 10返回 Promiseimage.PixelMap 像素图不是 dataURL 字符串image.PixelMap 有 getImageInfo/getPixelBytes/release 可读像素getSync(id): image.PixelMap同步截图API 12直接返回 image.PixelMap 不用 await 不是 PromisecreateFromBuilder(builder: CustomBuilder): Promiseimage.PixelMap从 CustomBuilder 截图builder 参数是Builder装饰的函数引用不是 Component 实例有 delay/checkImageStatus/options 参数image.createImagePacker().packing(pixelMap, { format: image/jpeg, quality: 90 })打包 PixelMap 为 JPEG bufferformat 是image/jpeg不是jpegfs.writeSync(fd, buffer)写文件第一参传file.fd文件描述符是 namespace 顶层函数不是 File 实例方法。componentSnapshot 返回 image.PixelMap 像素图不是 dataURL 字符串是鸿蒙 6.1 arkui.componentSnapshot 组件截图坑核心能力系列回链鸿蒙 7.0 新特性篇 1~17沉浸式毛玻璃/Component3D/智能体框架/方舟引擎/星盾安全/星河互联/空间音频/可变字体/游戏快启/分布式数据盾/LTPO 可变帧率/AI 文档识别/多形态服务窗口/AI 反诈/机密计算/空间计算/小艺全面进化鸿蒙 6.1 API 23 开发坑系列篇 1「ArkUI.modifier 装饰器坑」——attributeModifier AttributeModifier 状态化节点修改器鸿蒙 6.1 API 23 开发坑系列篇 2「arkui.componentSnapshot 组件截图坑」——get/getSync/createFromBuilder 返回 image.PixelMap本文真机 demo 完整代码// 鸿蒙 6.1 API 23 开发坑系列篇 2arkui.componentSnapshot 组件截图坑——get/getSync/createFromBuilder 返回 image.PixelMap 根因 import componentSnapshot from ohos.arkui.componentSnapshot import image from ohos.multimedia.image import fs from ohos.file.fs Builder function MySnapshotBuilder() { Column({ space: 4 }) { Text(CustomBuilder 截图内容).fontSize(14).fontColor(#28a745).fontWeight(FontWeight.Bold) Text(createFromBuilder 从 Builder 截图).fontSize(10).fontColor(#888) } .padding(12) .backgroundColor(#d4edda) .borderRadius(8) } Entry Component struct Index { State log: string (未操作) State snapshotStatus: string (未截) State syncSnapshotStatus: string (未截) State builderSnapshotStatus: string (未截) State pixelMapWidth: number 0 State pixelMapHeight: number 0 State snapshotCount: number 0 State savedFilePath: string (未存) State lastError: string (无错) aboutToAppear() { this.log 鸿蒙 6.1 arkui.componentSnapshot 组件截图坑get/getSync/createFromBuilder 返回 image.PixelMap } async demonstrateAsyncSnapshot() { try { const pixelMap: image.PixelMap await componentSnapshot.get(snapshotTarget) const imageInfo: image.ImageInfo await pixelMap.getImageInfo() this.pixelMapWidth imageInfo.size.width this.pixelMapHeight imageInfo.size.height this.snapshotStatus ✅ componentSnapshot.get(id) 异步截图成功PixelMap this.pixelMapWidth x this.pixelMapHeight this.log ✅ get(id) 返回 Promiseimage.PixelMap不是 dataURLPixelMap 像素图 this.pixelMapWidth x this.pixelMapHeight this.snapshotCount this.lastError (无错) } catch (e) { this.lastError ❌ get 异步截图错 e.message } } demonstrateSyncSnapshot() { try { const pixelMap: image.PixelMap componentSnapshot.getSync(snapshotTarget) this.syncSnapshotStatus ✅ componentSnapshot.getSync(id) 同步截图成功返回 image.PixelMap不用 await this.snapshotCount this.lastError (无错) } catch (e) { this.lastError ❌ getSync 同步截图错 e.message } } async demonstrateBuilderSnapshot() { try { const pixelMap: image.PixelMap await componentSnapshot.createFromBuilder(MySnapshotBuilder) const imageInfo: image.ImageInfo await pixelMap.getImageInfo() this.builderSnapshotStatus ✅ createFromBuilder(builder) 截图成功PixelMap imageInfo.size.width x imageInfo.size.height this.snapshotCount this.lastError (无错) } catch (e) { this.lastError ❌ createFromBuilder 截图错 e.message } } async savePixelMapToFile(pixelMap: image.PixelMap): Promisestring { try { const imagePacker: image.ImagePacker image.createImagePacker() const jpegBuffer: ArrayBuffer await imagePacker.packing(pixelMap, { format: image/jpeg, quality: 90 }) imagePacker.release() const context getContext(this) const cacheDir: string context.cacheDir const filePath: string cacheDir /snapshot_ Date.now() .jpeg const fileFd: number fs.openSync(filePath, fs.OpenMode.CREATE | fs.OpenMode.WRITE_ONLY).fd fs.writeSync(fileFd, jpegBuffer) fs.closeSync(fileFd) return filePath } catch (e) { this.lastError ❌ savePixelMapToFile 错 e.message return (存文件失败) } } async demonstrateSnapshotAndSave() { try { const pixelMap: image.PixelMap await componentSnapshot.get(snapshotTarget) const filePath: string await this.savePixelMapToFile(pixelMap) this.savedFilePath filePath this.log ✅ get(id) 截图 image.createImagePacker() 打包 JPEG fs.writeSync 存文件 filePath this.snapshotCount this.lastError (无错) } catch (e) { this.lastError ❌ 截图存文件错 e.message } } build() { Column({ space: 8 }) { Text(鸿蒙 6.1 arkui.componentSnapshot 组件截图坑) .fontSize(18).fontWeight(FontWeight.Bold).margin({ top: 16, bottom: 4 }) Text(get/getSync/createFromBuilder 返回 image.PixelMap 根因) .fontSize(11).fontColor(#888).margin({ bottom: 8 }) Column({ space: 4 }) { Text(截图目标组件idsnapshotTarget).fontSize(12).fontColor(#dc3545).fontWeight(FontWeight.Bold) Text(componentSnapshot.get(snapshotTarget) 截这个 Column).fontSize(9).fontColor(#888) Row({ space: 8 }) { Text(左上).fontSize(10).fontColor(#2563eb) Text(右上).fontSize(10).fontColor(#ff6600) } Row({ space: 8 }) { Text(左下).fontSize(10).fontColor(#28a745) Text(右下).fontSize(10).fontColor(#ffc107) } } .id(snapshotTarget) .width(80%) .padding(12) .backgroundColor(#f8d7da) .borderRadius(8) .border({ width: 2, color: #dc3545 }) Column({ space: 6 }) { Text(场景 1componentSnapshot.get(id) 异步截图API 10返回 Promiseimage.PixelMap) .fontSize(12).fontColor(#2563eb).fontWeight(FontWeight.Bold) Text(get 是 async 返回 Promiseimage.PixelMap不是 sync 返回 dataURL 字符串) .fontSize(9).fontColor(#888) Button(① get(id) 异步截图).height(30).fontSize(9).backgroundColor(#2563eb20) .onClick(() this.demonstrateAsyncSnapshot()) Text(this.snapshotStatus).fontSize(9).fontColor(#2563eb).margin({ top: 4 }) Text(PixelMap 尺寸${this.pixelMapWidth}x${this.pixelMapHeight}).fontSize(8).fontColor(#2563eb).margin({ top: 2 }) } .width(92%).padding(8).backgroundColor(#e0f0ff).borderRadius(8) Column({ space: 6 }) { Text(场景 2componentSnapshot.getSync(id) 同步截图API 12返回 image.PixelMap) .fontSize(12).fontColor(#ff6600).fontWeight(FontWeight.Bold) Text(getSync 是 API 12 同步方法直接返回 image.PixelMap 不用 await) .fontSize(9).fontColor(#888) Button(② getSync(id) 同步截图).height(30).fontSize(9).backgroundColor(#ff660020) .onClick(() this.demonstrateSyncSnapshot()) Text(this.syncSnapshotStatus).fontSize(9).fontColor(#ff6600).margin({ top: 4 }) } .width(92%).padding(8).backgroundColor(#fff3e0).borderRadius(8) Column({ space: 6 }) { Text(场景 3createFromBuilder(builder) 从 CustomBuilder 截图API 10) .fontSize(12).fontColor(#28a745).fontWeight(FontWeight.Bold) Text(builder 参数是 CustomBuilder 类型Builder 装饰的函数不是 Component) .fontSize(9).fontColor(#888) Button(③ createFromBuilder 截图).height(30).fontSize(9).backgroundColor(#28a74520) .onClick(() this.demonstrateBuilderSnapshot()) Text(this.builderSnapshotStatus).fontSize(9).fontColor(#28a745).margin({ top: 4 }) } .width(92%).padding(8).backgroundColor(#d4edda).borderRadius(8) Column({ space: 6 }) { Text(场景 4截图 存文件image.createImagePacker fs.writeSync) .fontSize(12).fontColor(#dc3545).fontWeight(FontWeight.Bold) Text(PixelMap → image.createImagePacker().packing JPEG buffer → fs.writeSync 存文件) .fontSize(9).fontColor(#888) Button(⑦ 截图存文件).height(30).fontSize(9).backgroundColor(#dc354520) .onClick(() this.demonstrateSnapshotAndSave()) Text(存文件路径${this.savedFilePath}).fontSize(8).fontColor(#dc3545).margin({ top: 4 }) } .width(92%).padding(8).backgroundColor(#f8d7da).borderRadius(8) Column({ space: 3 }) { Text(鸿蒙 6.1 arkui.componentSnapshot 组件截图坑要点) .fontSize(10).fontColor(#6c757d).fontWeight(FontWeight.Bold) Text(① ohos.arkui.componentSnapshot namespace API 10鸿蒙 6.1 API 23 基座) .fontSize(8).fontColor(#2563eb) Text(② get(id): Promiseimage.PixelMap 异步截图返回 Promiseimage.PixelMap 不是 dataURL) .fontSize(8).fontColor(#ff6600) Text(③ getSync(id): image.PixelMap 同步截图API 12直接返回不用 await) .fontSize(8).fontColor(#28a745) Text(④ createFromBuilder(builder): Promiseimage.PixelMap 从 CustomBuilder 截图) .fontSize(8).fontColor(#dc3545) Text(⑤ 鸿蒙坑get 返回 Promiseimage.PixelMapReact html2canvas 返回 dataURL 字符串) .fontSize(8).fontColor(#dc3545) Text(⑥ image.PixelMap 是像素图不是 dataURL——有 getImageInfo/getPixelBytes 可读像素) .fontSize(8).fontColor(#2563eb) Text(⑦ PixelMap 存文件image.createImagePacker().packing(buffer) fs.writeSync(fd, buffer)) .fontSize(8).fontColor(#ff6600) Text(⑧ createFromBuilder 的 builder 参数是 CustomBuilderBuilder 函数不是 Component) .fontSize(8).fontColor(#28a745) Text(⑨ SnapshotOptionsAPI 15SnapshotRegion/left/right/top/bottom 矩形区域截图) .fontSize(8).fontColor(#6c757d) Text(⑩ React 对比componentSnapshot 不是 html2canvas——鸿蒙返回 PixelMap 像素图不是 dataURL) .fontSize(8).fontColor(#17a2b8) } .width(92%).padding(6).backgroundColor(#f8f9fa).borderRadius(8) Row({ space: 12 }) { Text(截图次数: ${this.snapshotCount}).fontSize(9).fontColor(#28a745) Text(PixelMap: ${this.pixelMapWidth}x${this.pixelMapHeight}).fontSize(9).fontColor(#2563eb) } .margin({ top: 6 }) Text(日志${this.log}).fontSize(9).fontColor(#333).margin({ top: 6 }) Text(错误${this.lastError}).fontSize(8).fontColor(#dc3545).margin({ top: 2 }) Text(鸿蒙 6.1API 10arkui.componentSnapshotget/getSync/createFromBuilder 返回 image.PixelMap 像素图) .fontSize(8).fontColor(#6c757d).margin({ top: 6 }) } .width(100%).height(100%).alignItems(HorizontalAlign.Center) } }写鸿蒙 ArkUI 记住componentSnapshot 不是 html2canvas 是「返回 image.PixelMap 像素图」——鸿蒙 6.1 API 23ohos.arkui.componentSnapshotnamespaceAPI 10鸿蒙 6.1 API 23 基座SysCap SystemCapability.ArkUI.ArkUI.Fullcrossplatform atomicservice。根因不是 dataURL 字符串是 PixelMap 像素图——import componentSnapshot from✅ default import❌import { componentSnapshot } from编译错has no exported memberget(id): Promiseimage.PixelMap异步截图API 10返回 Promiseimage.PixelMap 像素图不是 dataURL 字符串image.PixelMap 有 getImageInfo/getPixelBytes/release 可读像素getSync(id): image.PixelMap同步截图API 12直接返回 image.PixelMap 不用 await 不是 PromisecreateFromBuilder(builder: CustomBuilder): Promiseimage.PixelMap从 CustomBuilder 截图builder 参数是Builder装饰的函数引用不是 Component 实例有 delay/checkImageStatus/options 参数image.createImagePacker().packing(pixelMap, { format: image/jpeg, quality: 90 })打包 PixelMap 为 JPEG bufferformat 是image/jpeg不是jpegfs.writeSync(fd, buffer)写文件第一参传file.fd文件描述符是 namespace 顶层函数不是 File 实例方法。componentSnapshot 返回 image.PixelMap 像素图不是 dataURL 字符串是鸿蒙 6.1 arkui.componentSnapshot 组件截图坑核心
本文是「鸿蒙 6.1 API 23 开发坑系列」第 2 篇ArkUI 桶第 2 篇。本篇讲ohos.arkui.componentSnapshotnamespaceAPI 10鸿蒙 6.1 API 23 基座——组件截图三个方法get/getSync/createFromBuilder。鸿蒙坑根因①import坑——import { componentSnapshot } from编译错has no exported member必须import componentSnapshot fromdefault import② 返回值坑——get(id)返回Promiseimage.PixelMap不是dataURL字符串React html2canvas 返回 dataURLimage.PixelMap是像素图有getImageInfo/getPixelBytes可读像素③createFromBuilder(builder)的 builder 参数是CustomBuilderBuilder装饰的函数不是 Component。一、开篇鸿蒙 componentSnapshot 不是 html2canvas是「返回 PixelMap 像素图」你写 React 时组件截图用html2canvas返回 canvas → toDataURL 转 dataURL 字符串// React html2canvas返回 canvas → toDataURL 转 dataURL 字符串 async function snapshotComponent() { // ❌ html2canvas 返回 HTMLCanvasElementtoDataURL() 转 dataURL 字符串 const canvas: HTMLCanvasElement await html2canvas(document.getElementById(target)) const dataURL: string canvas.toDataURL(image/jpeg, 0.9) // ❌ dataURL 字符串 // ❌ React html2canvas返回 canvas → dataURL 字符串不是 PixelMap 像素图 }你写鸿蒙 ArkTS 时组件截图用componentSnapshot.get(id)返回Promiseimage.PixelMap像素图// ArkTS componentSnapshot返回 Promiseimage.PixelMap 像素图不是 dataURL 字符串 import componentSnapshot from ohos.arkui.componentSnapshot // ✅ default import import image from ohos.multimedia.image async function snapshotComponent() { // ✅ get(id) 返回 Promiseimage.PixelMapimage.PixelMap 是像素图不是 dataURL const pixelMap: image.PixelMap await componentSnapshot.get(snapshotTarget) const imageInfo: image.ImageInfo await pixelMap.getImageInfo() // ✅ PixelMap 有 getImageInfo/getPixelBytes 可读像素不是 dataURL 字符串 const width: number imageInfo.size.width const height: number imageInfo.size.height }React html2canvas vs 鸿蒙 componentSnapshot 的区别React 把组件截图当 canvas 转 dataURLhtml2canvas 返回 HTMLCanvasElement toDataURL() 转 dataURL 字符串base64 编码字符串ArkTS 把组件截图当 PixelMap 像素图componentSnapshot.get 返回 Promiseimage.PixelMapimage.PixelMap 是像素图有 getImageInfo/getPixelBytes 可读像素不是 dataURL 字符串。根因不是 dataURL 字符串是 PixelMap 像素图——鸿蒙返回 image.PixelMap 像素图有 getImageInfo/getPixelBytes 可读像素。二、根因鸿蒙 componentSnapshot 的三个绑定机制鸿蒙ohos.arkui.componentSnapshotnamespaceAPI 10有三个截图方法每个返回image.PixelMap像素图。绑定机制来自三重根因。机制 1import 坑——default import 不是 named import鸿蒙坑根因import { componentSnapshot } from编译错——必须import componentSnapshot from// ❌ 鸿蒙坑import { componentSnapshot } from 编译错has no exported member // ❌ 编译错Module ohos.arkui.componentSnapshot has no exported member componentSnapshot // ❌ 错误信息Did you mean to use import componentSnapshot from ohos.arkui.componentSnapshot instead? import { componentSnapshot } from ohos.arkui.componentSnapshot // ❌ named import 编译错 // ✅ 正确用法default importcomponentSnapshot 是 default export 不是 named export import componentSnapshot from ohos.arkui.componentSnapshot // ✅ default import // 鸿蒙坑根因componentSnapshot 是 default export必须 default import 不是 named importimport 坑根因ohos.arkui.componentSnapshot的componentSnapshot是declare namespacedefault namespace export不是 named export所以import { componentSnapshot }触发has no exported member componentSnapshot编译错。正确用法是import componentSnapshot fromdefault import。机制 2get 返回 Promiseimage.PixelMap 不是 dataURL 字符串鸿蒙坑根因get(id)返回Promiseimage.PixelMap像素图不是 dataURL 字符串// ✅ get(id): Promiseimage.PixelMap 异步截图返回 Promiseimage.PixelMap不是 dataURL import componentSnapshot from ohos.arkui.componentSnapshot import image from ohos.multimedia.image async function asyncSnapshot() { // ✅ get(id) 返回 Promiseimage.PixelMapimage.PixelMap 是像素图不是 dataURL const pixelMap: image.PixelMap await componentSnapshot.get(snapshotTarget) // ✅ PixelMap 有 getImageInfo/getPixelBytes 可读像素 const imageInfo: image.ImageInfo await pixelMap.getImageInfo() const width: number imageInfo.size.width const height: number imageInfo.size.height // 鸿蒙坑根因get 返回 Promiseimage.PixelMap 像素图React html2canvas 返回 dataURL 字符串 } // ✅ getSync(id): image.PixelMap 同步截图API 12直接返回不用 await function syncSnapshot() { // ✅ getSync 是 API 12 同步方法直接返回 image.PixelMap 不用 await const pixelMap: image.PixelMap componentSnapshot.getSync(snapshotTarget) // 鸿蒙坑getSync 是 API 12 同步方法不是 Promise 不用 await }get vs getSync 的区别get(id): Promiseimage.PixelMap异步截图API 10返回 Promise 需要 awaitgetSync(id): image.PixelMap同步截图API 12直接返回 image.PixelMap 不用 await不是 Promise。鸿蒙坑getSync 是 API 12 同步方法不是 Promise 不用 await直接返回 image.PixelMap。image.PixelMap vs dataURL 的区别image.PixelMap是鸿蒙像素图接口有 getImageInfo/getPixelBytes 可读像素release 释放资源dataURL是 base64 编码字符串React html2canvas 返回无 getImageInfo/getPixelBytes。根因不是 dataURL 字符串是 PixelMap 像素图——鸿蒙返回 image.PixelMap 像素图有 getImageInfo/getPixelBytes 可读像素。机制 3createFromBuilder(builder) 的 builder 参数是 CustomBuilder 不是 Component鸿蒙坑根因createFromBuilder(builder)的 builder 参数是CustomBuilderBuilder装饰的函数不是 Component// ✅ createFromBuilder(builder) 从 CustomBuilder 截图builder 参数是 Builder 函数不是 Component import componentSnapshot from ohos.arkui.componentSnapshot // ✅ Builder 装饰的函数是 CustomBuilder 类型createFromBuilder 的 builder 参数 Builder function MySnapshotBuilder() { Column({ space: 4 }) { Text(CustomBuilder 截图内容).fontSize(14).fontColor(#28a745) } .padding(12).backgroundColor(#d4edda).borderRadius(8) } async function builderSnapshot() { // ✅ createFromBuilder(builder) 返回 Promiseimage.PixelMap // ✅ 鸿蒙坑builder 参数是 CustomBuilderBuilder 函数不是 Component const pixelMap: image.PixelMap await componentSnapshot.createFromBuilder(MySnapshotBuilder) // 鸿蒙坑根因builder 参数是 CustomBuilderBuilder 装饰的函数不是 Component }createFromBuilder 的 builder 参数坑createFromBuilder(builder: CustomBuilder, ...)的 builder 参数是CustomBuilder类型Builder装饰的函数引用不是 Component 实例不是 build() 返回值。鸿蒙坑传 Component 实例或 build() 返回值会类型错——必须传Builder装饰的函数引用MySnapshotBuilder不是MySnapshotBuilder()。三、真机配图鸿蒙 arkui.componentSnapshot 组件截图坑——get/getSync/createFromBuilder真机配图展示鸿蒙 arkui.componentSnapshot 组件截图坑初始态鸿蒙 6.1 arkui.componentSnapshot 组件截图坑标题截图目标组件红框 idsnapshotTarget四角文字左上/右上/左下/右下场景1~4 卡片get/getSync/createFromBuilder/截图存文件要点说明get(id) 异步截图态点击「① get(id) 异步截图」按钮snapshotStatus 显示「✅ componentSnapshot.get(id) 异步截图成功PixelMap 1066x278」截图次数 1——get 返回 Promiseimage.PixelMap 验证getSync(id) 同步截图态点击「② getSync(id) 同步截图」按钮syncSnapshotStatus 显示「✅ componentSnapshot.getSync(id) 同步截图成功返回 image.PixelMap不用 await」截图次数 2——getSync 同步返回 image.PixelMap 验证createFromBuilder 态点击「③ createFromBuilder 截图」按钮builderSnapshotStatus 显示「✅ createFromBuilder(builder) 截图成功PixelMap 393x78」截图次数 3——createFromBuilder 从 CustomBuilder 截图验证截图存文件态点击「⑦ 截图存文件」按钮savedFilePath 显示「/data/storage/…/cache/snapshot_*.jpeg」截图次数 4——PixelMap 存文件验证image.createImagePacker fs.writeSync四、真解法鸿蒙 componentSnapshot 的三个场景场景 1get(id) 异步截图 getSync(id) 同步截图——90% 场景首选get/getSync 截图用componentSnapshot.get(id)componentSnapshot.getSync(id)// ✅ 场景 1get(id) 异步截图 getSync(id) 同步截图API 10/1290% 场景首选 import componentSnapshot from ohos.arkui.componentSnapshot // ✅ default import import image from ohos.multimedia.image // ✅ get(id): Promiseimage.PixelMap 异步截图API 10返回 Promise 需要 await async function asyncSnapshot() { const pixelMap: image.PixelMap await componentSnapshot.get(snapshotTarget) const imageInfo: image.ImageInfo await pixelMap.getImageInfo() // PixelMap 像素图getImageInfo 读尺寸getPixelBytes 读像素 } // ✅ getSync(id): image.PixelMap 同步截图API 12直接返回不用 await function syncSnapshot() { const pixelMap: image.PixelMap componentSnapshot.getSync(snapshotTarget) // getSync 同步返回 image.PixelMap不是 Promise 不用 await } // get/getSync 截图90% 场景首选返回 image.PixelMap 像素图不是 dataURL鸿蒙 componentSnapshot API 真名坑import componentSnapshot from ohos.arkui.componentSnapshotdefault import 不是 named importget(id: string, callback?: AsyncCallbackimage.PixelMap, options?: SnapshotOptions): void异步截图API 10callback 可选get(id: string, options?: SnapshotOptions): Promiseimage.PixelMapPromise 异步截图API 10返回 Promiseimage.PixelMapgetSync(id: string, options?: SnapshotOptions): image.PixelMap同步截图API 12直接返回 image.PixelMapimage.PixelMap像素图接口getImageInfo/getPixelBytes/releaseSysCapSystemCapability.ArkUI.ArkUI.Fullcrossplatform跨平台atomicservice原子化服务SnapshotOptionsAPI 15SnapshotRegion/left/right/top/bottom 矩形区域截图。场景 2createFromBuilder(builder) 从 CustomBuilder 截图createFromBuilder 截图用componentSnapshot.createFromBuilder(MyBuilder)Builder装饰函数// ✅ 场景 2createFromBuilder(builder) 从 CustomBuilder 截图API 10 import componentSnapshot from ohos.arkui.componentSnapshot // ✅ Builder 装饰的函数是 CustomBuilder 类型createFromBuilder 的 builder 参数 Builder function MySnapshotBuilder() { Column({ space: 4 }) { Text(CustomBuilder 截图内容).fontSize(14).fontColor(#28a745).fontWeight(FontWeight.Bold) Text(createFromBuilder 从 Builder 截图).fontSize(10).fontColor(#888) } .padding(12).backgroundColor(#d4edda).borderRadius(8) } async function builderSnapshot() { // ✅ createFromBuilder(builder) 返回 Promiseimage.PixelMap // ✅ 鸿蒙坑builder 参数是 CustomBuilderBuilder 函数引用不是 Component 实例 const pixelMap: image.PixelMap await componentSnapshot.createFromBuilder(MySnapshotBuilder) // ✅ createFromBuilder 也有 callback 和 delay/checkImageStatus/options 参数 // componentSnapshot.createFromBuilder(MyBuilder, 500, true, options) // delay500ms, checkImageStatustrue } // createFromBuilder 从 CustomBuilder 截图builder 参数是 Builder 函数引用不是 Component鸿蒙 createFromBuilder API 真名坑createFromBuilder(builder: CustomBuilder, callback?: AsyncCallbackimage.PixelMap, delay?: number, checkImageStatus?: boolean, options?: SnapshotOptions): voidcallback 异步API 10createFromBuilder(builder: CustomBuilder, delay?: number, checkImageStatus?: boolean, options?: SnapshotOptions): Promiseimage.PixelMapPromise 异步API 10CustomBuilder是Builder装饰的函数类型传函数引用MyBuilder不是调用MyBuilder()delay延迟截图毫秒数等组件渲染完checkImageStatus检查图片状态true 等图片加载完再截图鸿蒙坑builder 参数传 Component 实例或 build() 返回值会类型错——必须传Builder装饰的函数引用。场景 3PixelMap 存文件——image.createImagePacker fs.writeSyncPixelMap 存文件用image.createImagePacker().packing()打包 JPEG buffer fs.writeSync写文件// ✅ 场景 3PixelMap 存文件——image.createImagePacker fs.writeSyncAPI 10 import componentSnapshot from ohos.arkui.componentSnapshot import image from ohos.multimedia.image import fs from ohos.file.fs async function snapshotAndSave() { // ✅ get(id) 截图返回 PixelMap const pixelMap: image.PixelMap await componentSnapshot.get(snapshotTarget) // ✅ image.createImagePacker() 打包 PixelMap 为 JPEG buffer const imagePacker: image.ImagePacker image.createImagePacker() const jpegBuffer: ArrayBuffer await imagePacker.packing(pixelMap, { format: image/jpeg, // ✅ format: image/jpeg 不是 jpeg quality: 90 // ✅ quality: 0-100 }) imagePacker.release() // ✅ release 释放 ImagePacker // ✅ fs.openSync 打开文件 fs.writeSync 写 buffer fs.closeSync 关文件 const context getContext(this) // ✅ getContext 获取 Contextdeprecated 警告但仍可用 const cacheDir: string context.cacheDir // ✅ cacheDir 缓存目录 const filePath: string cacheDir /snapshot_ Date.now() .jpeg const fileFd: number fs.openSync(filePath, fs.OpenMode.CREATE | fs.OpenMode.WRITE_ONLY).fd // ✅ .fd 取文件描述符 fs.writeSync(fileFd, jpegBuffer) // ✅ writeSync(fd, buffer) 第一参传 fd fs.closeSync(fileFd) // ✅ closeSync(fd) 关文件 } // PixelMap 存文件image.createImagePacker().packing JPEG buffer fs.writeSync(fd, buffer)鸿蒙 PixelMap 存文件 API 真名坑image.createImagePacker(): image.ImagePacker创建打包器API 10imagePacker.packing(pixelMap, options?: image.PackingOption): PromiseArrayBuffer打包 PixelMap 为 bufferAPI 10PackingOption{ format: image/jpeg, quality: 90 }format 是image/jpeg不是jpegquality 0-100imagePacker.release()释放打包器fs.openSync(path, mode): fs.File同步打开文件API 10.fd取文件描述符fs.writeSync(fd: number, buffer: ArrayBuffer)同步写 bufferAPI 10第一参传 fd 文件描述符不是 File 实例fs.closeSync(fd: number)同步关文件鸿蒙坑fs.writeSync第一参传file.fd文件描述符不是 File 实例方法是 namespace 顶层函数getContext(this)已 deprecated 警告但仍可用推荐用this.getContext()或组件 Context。五、一句话哲学写鸿蒙 ArkUI 记住componentSnapshot 不是 html2canvas 是「返回 image.PixelMap 像素图」——鸿蒙 6.1 API 23ohos.arkui.componentSnapshotnamespaceAPI 10鸿蒙 6.1 API 23 基座SysCap SystemCapability.ArkUI.ArkUI.Fullcrossplatform atomicservice。根因不是 dataURL 字符串是 PixelMap 像素图——import componentSnapshot from✅ default import❌import { componentSnapshot } from编译错has no exported memberget(id): Promiseimage.PixelMap异步截图API 10返回 Promiseimage.PixelMap 像素图不是 dataURL 字符串image.PixelMap 有 getImageInfo/getPixelBytes/release 可读像素getSync(id): image.PixelMap同步截图API 12直接返回 image.PixelMap 不用 await 不是 PromisecreateFromBuilder(builder: CustomBuilder): Promiseimage.PixelMap从 CustomBuilder 截图builder 参数是Builder装饰的函数引用不是 Component 实例有 delay/checkImageStatus/options 参数image.createImagePacker().packing(pixelMap, { format: image/jpeg, quality: 90 })打包 PixelMap 为 JPEG bufferformat 是image/jpeg不是jpegfs.writeSync(fd, buffer)写文件第一参传file.fd文件描述符是 namespace 顶层函数不是 File 实例方法。componentSnapshot 返回 image.PixelMap 像素图不是 dataURL 字符串是鸿蒙 6.1 arkui.componentSnapshot 组件截图坑核心能力系列回链鸿蒙 7.0 新特性篇 1~17沉浸式毛玻璃/Component3D/智能体框架/方舟引擎/星盾安全/星河互联/空间音频/可变字体/游戏快启/分布式数据盾/LTPO 可变帧率/AI 文档识别/多形态服务窗口/AI 反诈/机密计算/空间计算/小艺全面进化鸿蒙 6.1 API 23 开发坑系列篇 1「ArkUI.modifier 装饰器坑」——attributeModifier AttributeModifier 状态化节点修改器鸿蒙 6.1 API 23 开发坑系列篇 2「arkui.componentSnapshot 组件截图坑」——get/getSync/createFromBuilder 返回 image.PixelMap本文真机 demo 完整代码// 鸿蒙 6.1 API 23 开发坑系列篇 2arkui.componentSnapshot 组件截图坑——get/getSync/createFromBuilder 返回 image.PixelMap 根因 import componentSnapshot from ohos.arkui.componentSnapshot import image from ohos.multimedia.image import fs from ohos.file.fs Builder function MySnapshotBuilder() { Column({ space: 4 }) { Text(CustomBuilder 截图内容).fontSize(14).fontColor(#28a745).fontWeight(FontWeight.Bold) Text(createFromBuilder 从 Builder 截图).fontSize(10).fontColor(#888) } .padding(12) .backgroundColor(#d4edda) .borderRadius(8) } Entry Component struct Index { State log: string (未操作) State snapshotStatus: string (未截) State syncSnapshotStatus: string (未截) State builderSnapshotStatus: string (未截) State pixelMapWidth: number 0 State pixelMapHeight: number 0 State snapshotCount: number 0 State savedFilePath: string (未存) State lastError: string (无错) aboutToAppear() { this.log 鸿蒙 6.1 arkui.componentSnapshot 组件截图坑get/getSync/createFromBuilder 返回 image.PixelMap } async demonstrateAsyncSnapshot() { try { const pixelMap: image.PixelMap await componentSnapshot.get(snapshotTarget) const imageInfo: image.ImageInfo await pixelMap.getImageInfo() this.pixelMapWidth imageInfo.size.width this.pixelMapHeight imageInfo.size.height this.snapshotStatus ✅ componentSnapshot.get(id) 异步截图成功PixelMap this.pixelMapWidth x this.pixelMapHeight this.log ✅ get(id) 返回 Promiseimage.PixelMap不是 dataURLPixelMap 像素图 this.pixelMapWidth x this.pixelMapHeight this.snapshotCount this.lastError (无错) } catch (e) { this.lastError ❌ get 异步截图错 e.message } } demonstrateSyncSnapshot() { try { const pixelMap: image.PixelMap componentSnapshot.getSync(snapshotTarget) this.syncSnapshotStatus ✅ componentSnapshot.getSync(id) 同步截图成功返回 image.PixelMap不用 await this.snapshotCount this.lastError (无错) } catch (e) { this.lastError ❌ getSync 同步截图错 e.message } } async demonstrateBuilderSnapshot() { try { const pixelMap: image.PixelMap await componentSnapshot.createFromBuilder(MySnapshotBuilder) const imageInfo: image.ImageInfo await pixelMap.getImageInfo() this.builderSnapshotStatus ✅ createFromBuilder(builder) 截图成功PixelMap imageInfo.size.width x imageInfo.size.height this.snapshotCount this.lastError (无错) } catch (e) { this.lastError ❌ createFromBuilder 截图错 e.message } } async savePixelMapToFile(pixelMap: image.PixelMap): Promisestring { try { const imagePacker: image.ImagePacker image.createImagePacker() const jpegBuffer: ArrayBuffer await imagePacker.packing(pixelMap, { format: image/jpeg, quality: 90 }) imagePacker.release() const context getContext(this) const cacheDir: string context.cacheDir const filePath: string cacheDir /snapshot_ Date.now() .jpeg const fileFd: number fs.openSync(filePath, fs.OpenMode.CREATE | fs.OpenMode.WRITE_ONLY).fd fs.writeSync(fileFd, jpegBuffer) fs.closeSync(fileFd) return filePath } catch (e) { this.lastError ❌ savePixelMapToFile 错 e.message return (存文件失败) } } async demonstrateSnapshotAndSave() { try { const pixelMap: image.PixelMap await componentSnapshot.get(snapshotTarget) const filePath: string await this.savePixelMapToFile(pixelMap) this.savedFilePath filePath this.log ✅ get(id) 截图 image.createImagePacker() 打包 JPEG fs.writeSync 存文件 filePath this.snapshotCount this.lastError (无错) } catch (e) { this.lastError ❌ 截图存文件错 e.message } } build() { Column({ space: 8 }) { Text(鸿蒙 6.1 arkui.componentSnapshot 组件截图坑) .fontSize(18).fontWeight(FontWeight.Bold).margin({ top: 16, bottom: 4 }) Text(get/getSync/createFromBuilder 返回 image.PixelMap 根因) .fontSize(11).fontColor(#888).margin({ bottom: 8 }) Column({ space: 4 }) { Text(截图目标组件idsnapshotTarget).fontSize(12).fontColor(#dc3545).fontWeight(FontWeight.Bold) Text(componentSnapshot.get(snapshotTarget) 截这个 Column).fontSize(9).fontColor(#888) Row({ space: 8 }) { Text(左上).fontSize(10).fontColor(#2563eb) Text(右上).fontSize(10).fontColor(#ff6600) } Row({ space: 8 }) { Text(左下).fontSize(10).fontColor(#28a745) Text(右下).fontSize(10).fontColor(#ffc107) } } .id(snapshotTarget) .width(80%) .padding(12) .backgroundColor(#f8d7da) .borderRadius(8) .border({ width: 2, color: #dc3545 }) Column({ space: 6 }) { Text(场景 1componentSnapshot.get(id) 异步截图API 10返回 Promiseimage.PixelMap) .fontSize(12).fontColor(#2563eb).fontWeight(FontWeight.Bold) Text(get 是 async 返回 Promiseimage.PixelMap不是 sync 返回 dataURL 字符串) .fontSize(9).fontColor(#888) Button(① get(id) 异步截图).height(30).fontSize(9).backgroundColor(#2563eb20) .onClick(() this.demonstrateAsyncSnapshot()) Text(this.snapshotStatus).fontSize(9).fontColor(#2563eb).margin({ top: 4 }) Text(PixelMap 尺寸${this.pixelMapWidth}x${this.pixelMapHeight}).fontSize(8).fontColor(#2563eb).margin({ top: 2 }) } .width(92%).padding(8).backgroundColor(#e0f0ff).borderRadius(8) Column({ space: 6 }) { Text(场景 2componentSnapshot.getSync(id) 同步截图API 12返回 image.PixelMap) .fontSize(12).fontColor(#ff6600).fontWeight(FontWeight.Bold) Text(getSync 是 API 12 同步方法直接返回 image.PixelMap 不用 await) .fontSize(9).fontColor(#888) Button(② getSync(id) 同步截图).height(30).fontSize(9).backgroundColor(#ff660020) .onClick(() this.demonstrateSyncSnapshot()) Text(this.syncSnapshotStatus).fontSize(9).fontColor(#ff6600).margin({ top: 4 }) } .width(92%).padding(8).backgroundColor(#fff3e0).borderRadius(8) Column({ space: 6 }) { Text(场景 3createFromBuilder(builder) 从 CustomBuilder 截图API 10) .fontSize(12).fontColor(#28a745).fontWeight(FontWeight.Bold) Text(builder 参数是 CustomBuilder 类型Builder 装饰的函数不是 Component) .fontSize(9).fontColor(#888) Button(③ createFromBuilder 截图).height(30).fontSize(9).backgroundColor(#28a74520) .onClick(() this.demonstrateBuilderSnapshot()) Text(this.builderSnapshotStatus).fontSize(9).fontColor(#28a745).margin({ top: 4 }) } .width(92%).padding(8).backgroundColor(#d4edda).borderRadius(8) Column({ space: 6 }) { Text(场景 4截图 存文件image.createImagePacker fs.writeSync) .fontSize(12).fontColor(#dc3545).fontWeight(FontWeight.Bold) Text(PixelMap → image.createImagePacker().packing JPEG buffer → fs.writeSync 存文件) .fontSize(9).fontColor(#888) Button(⑦ 截图存文件).height(30).fontSize(9).backgroundColor(#dc354520) .onClick(() this.demonstrateSnapshotAndSave()) Text(存文件路径${this.savedFilePath}).fontSize(8).fontColor(#dc3545).margin({ top: 4 }) } .width(92%).padding(8).backgroundColor(#f8d7da).borderRadius(8) Column({ space: 3 }) { Text(鸿蒙 6.1 arkui.componentSnapshot 组件截图坑要点) .fontSize(10).fontColor(#6c757d).fontWeight(FontWeight.Bold) Text(① ohos.arkui.componentSnapshot namespace API 10鸿蒙 6.1 API 23 基座) .fontSize(8).fontColor(#2563eb) Text(② get(id): Promiseimage.PixelMap 异步截图返回 Promiseimage.PixelMap 不是 dataURL) .fontSize(8).fontColor(#ff6600) Text(③ getSync(id): image.PixelMap 同步截图API 12直接返回不用 await) .fontSize(8).fontColor(#28a745) Text(④ createFromBuilder(builder): Promiseimage.PixelMap 从 CustomBuilder 截图) .fontSize(8).fontColor(#dc3545) Text(⑤ 鸿蒙坑get 返回 Promiseimage.PixelMapReact html2canvas 返回 dataURL 字符串) .fontSize(8).fontColor(#dc3545) Text(⑥ image.PixelMap 是像素图不是 dataURL——有 getImageInfo/getPixelBytes 可读像素) .fontSize(8).fontColor(#2563eb) Text(⑦ PixelMap 存文件image.createImagePacker().packing(buffer) fs.writeSync(fd, buffer)) .fontSize(8).fontColor(#ff6600) Text(⑧ createFromBuilder 的 builder 参数是 CustomBuilderBuilder 函数不是 Component) .fontSize(8).fontColor(#28a745) Text(⑨ SnapshotOptionsAPI 15SnapshotRegion/left/right/top/bottom 矩形区域截图) .fontSize(8).fontColor(#6c757d) Text(⑩ React 对比componentSnapshot 不是 html2canvas——鸿蒙返回 PixelMap 像素图不是 dataURL) .fontSize(8).fontColor(#17a2b8) } .width(92%).padding(6).backgroundColor(#f8f9fa).borderRadius(8) Row({ space: 12 }) { Text(截图次数: ${this.snapshotCount}).fontSize(9).fontColor(#28a745) Text(PixelMap: ${this.pixelMapWidth}x${this.pixelMapHeight}).fontSize(9).fontColor(#2563eb) } .margin({ top: 6 }) Text(日志${this.log}).fontSize(9).fontColor(#333).margin({ top: 6 }) Text(错误${this.lastError}).fontSize(8).fontColor(#dc3545).margin({ top: 2 }) Text(鸿蒙 6.1API 10arkui.componentSnapshotget/getSync/createFromBuilder 返回 image.PixelMap 像素图) .fontSize(8).fontColor(#6c757d).margin({ top: 6 }) } .width(100%).height(100%).alignItems(HorizontalAlign.Center) } }写鸿蒙 ArkUI 记住componentSnapshot 不是 html2canvas 是「返回 image.PixelMap 像素图」——鸿蒙 6.1 API 23ohos.arkui.componentSnapshotnamespaceAPI 10鸿蒙 6.1 API 23 基座SysCap SystemCapability.ArkUI.ArkUI.Fullcrossplatform atomicservice。根因不是 dataURL 字符串是 PixelMap 像素图——import componentSnapshot from✅ default import❌import { componentSnapshot } from编译错has no exported memberget(id): Promiseimage.PixelMap异步截图API 10返回 Promiseimage.PixelMap 像素图不是 dataURL 字符串image.PixelMap 有 getImageInfo/getPixelBytes/release 可读像素getSync(id): image.PixelMap同步截图API 12直接返回 image.PixelMap 不用 await 不是 PromisecreateFromBuilder(builder: CustomBuilder): Promiseimage.PixelMap从 CustomBuilder 截图builder 参数是Builder装饰的函数引用不是 Component 实例有 delay/checkImageStatus/options 参数image.createImagePacker().packing(pixelMap, { format: image/jpeg, quality: 90 })打包 PixelMap 为 JPEG bufferformat 是image/jpeg不是jpegfs.writeSync(fd, buffer)写文件第一参传file.fd文件描述符是 namespace 顶层函数不是 File 实例方法。componentSnapshot 返回 image.PixelMap 像素图不是 dataURL 字符串是鸿蒙 6.1 arkui.componentSnapshot 组件截图坑核心
，以及不调库的 RAG)
