本文是「鴻蒙 6.1 API 23 開(kāi)發(fā)坑系列」第 2 篇ArkUI 桶第 2 篇。本篇講ohos.arkui.componentSnapshotnamespaceAPI 10鴻蒙 6.1 API 23 基座——組件截圖三個(gè)方法get/getSync/createFromBuilder。鴻蒙坑根因①import坑——import { componentSnapshot } from編譯錯(cuò)has no exported member必須import componentSnapshot fromdefault import② 返回值坑——get(id)返回Promiseimage.PixelMap不是dataURL字符串React html2canvas 返回 dataURLimage.PixelMap是像素圖有g(shù)etImageInfo/getPixelBytes可讀像素③createFromBuilder(builder)的 builder 參數(shù)是CustomBuilderBuilder裝飾的函數(shù)不是 Component。一、開(kāi)篇鴻蒙 componentSnapshot 不是 html2canvas是「返回 PixelMap 像素圖」你寫(xiě) React 時(shí)組件截圖用html2canvas返回 canvas → toDataURL 轉(zhuǎn) dataURL 字符串// React html2canvas返回 canvas → toDataURL 轉(zhuǎn) dataURL 字符串 async function snapshotComponent() { // ? html2canvas 返回 HTMLCanvasElementtoDataURL() 轉(zhuǎn) dataURL 字符串 const canvas: HTMLCanvasElement await html2canvas(document.getElementById(target)) const dataURL: string canvas.toDataURL(image/jpeg, 0.9) // ? dataURL 字符串 // ? React html2canvas返回 canvas → dataURL 字符串不是 PixelMap 像素圖 }你寫(xiě)鴻蒙 ArkTS 時(shí)組件截圖用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 的區(qū)別React 把組件截圖當(dāng) canvas 轉(zhuǎn) dataURLhtml2canvas 返回 HTMLCanvasElement toDataURL() 轉(zhuǎn) dataURL 字符串base64 編碼字符串ArkTS 把組件截圖當(dāng) PixelMap 像素圖componentSnapshot.get 返回 Promiseimage.PixelMapimage.PixelMap 是像素圖有 getImageInfo/getPixelBytes 可讀像素不是 dataURL 字符串。根因不是 dataURL 字符串是 PixelMap 像素圖——鴻蒙返回 image.PixelMap 像素圖有 getImageInfo/getPixelBytes 可讀像素。二、根因鴻蒙 componentSnapshot 的三個(gè)綁定機(jī)制鴻蒙ohos.arkui.componentSnapshotnamespaceAPI 10有三個(gè)截圖方法每個(gè)返回image.PixelMap像素圖。綁定機(jī)制來(lái)自三重根因。機(jī)制 1import 坑——default import 不是 named import鴻蒙坑根因import { componentSnapshot } from編譯錯(cuò)——必須import componentSnapshot from// ? 鴻蒙坑import { componentSnapshot } from 編譯錯(cuò)has no exported member // ? 編譯錯(cuò)Module ohos.arkui.componentSnapshot has no exported member componentSnapshot // ? 錯(cuò)誤信息Did you mean to use import componentSnapshot from ohos.arkui.componentSnapshot instead? import { componentSnapshot } from ohos.arkui.componentSnapshot // ? named import 編譯錯(cuò) // ? 正確用法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 }觸發(fā)has no exported member componentSnapshot編譯錯(cuò)。正確用法是import componentSnapshot fromdefault import。機(jī)制 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 的區(qū)別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 的區(qū)別image.PixelMap是鴻蒙像素圖接口有 getImageInfo/getPixelBytes 可讀像素release 釋放資源dataURL是 base64 編碼字符串React html2canvas 返回?zé)o getImageInfo/getPixelBytes。根因不是 dataURL 字符串是 PixelMap 像素圖——鴻蒙返回 image.PixelMap 像素圖有 getImageInfo/getPixelBytes 可讀像素。機(jī)制 3createFromBuilder(builder) 的 builder 參數(shù)是 CustomBuilder 不是 Component鴻蒙坑根因createFromBuilder(builder)的 builder 參數(shù)是CustomBuilderBuilder裝飾的函數(shù)不是 Component// ? createFromBuilder(builder) 從 CustomBuilder 截圖builder 參數(shù)是 Builder 函數(shù)不是 Component import componentSnapshot from ohos.arkui.componentSnapshot // ? Builder 裝飾的函數(shù)是 CustomBuilder 類(lèi)型createFromBuilder 的 builder 參數(shù) Builder function MySnapshotBuilder() { Column({ space: 4 }) { Text(CustomBuilder 截圖內(nèi)容).fontSize(14).fontColor(#28a745) } .padding(12).backgroundColor(#d4edda).borderRadius(8) } async function builderSnapshot() { // ? createFromBuilder(builder) 返回 Promiseimage.PixelMap // ? 鴻蒙坑builder 參數(shù)是 CustomBuilderBuilder 函數(shù)不是 Component const pixelMap: image.PixelMap await componentSnapshot.createFromBuilder(MySnapshotBuilder) // 鴻蒙坑根因builder 參數(shù)是 CustomBuilderBuilder 裝飾的函數(shù)不是 Component }createFromBuilder 的 builder 參數(shù)坑createFromBuilder(builder: CustomBuilder, ...)的 builder 參數(shù)是CustomBuilder類(lèi)型Builder裝飾的函數(shù)引用不是 Component 實(shí)例不是 build() 返回值。鴻蒙坑傳 Component 實(shí)例或 build() 返回值會(huì)類(lèi)型錯(cuò)——必須傳Builder裝飾的函數(shù)引用MySnapshotBuilder不是MySnapshotBuilder()。三、真機(jī)配圖鴻蒙 arkui.componentSnapshot 組件截圖坑——get/getSync/createFromBuilder真機(jī)配圖展示鴻蒙 arkui.componentSnapshot 組件截圖坑初始態(tài)鴻蒙 6.1 arkui.componentSnapshot 組件截圖坑標(biāo)題截圖目標(biāo)組件紅框 idsnapshotTarget四角文字左上/右上/左下/右下場(chǎng)景1~4 卡片get/getSync/createFromBuilder/截圖存文件要點(diǎn)說(shuō)明get(id) 異步截圖態(tài)點(diǎn)擊「① get(id) 異步截圖」按鈕snapshotStatus 顯示「? componentSnapshot.get(id) 異步截圖成功PixelMap 1066x278」截圖次數(shù) 1——get 返回 Promiseimage.PixelMap 驗(yàn)證getSync(id) 同步截圖態(tài)點(diǎn)擊「② getSync(id) 同步截圖」按鈕syncSnapshotStatus 顯示「? componentSnapshot.getSync(id) 同步截圖成功返回 image.PixelMap不用 await」截圖次數(shù) 2——getSync 同步返回 image.PixelMap 驗(yàn)證createFromBuilder 態(tài)點(diǎn)擊「③ createFromBuilder 截圖」按鈕builderSnapshotStatus 顯示「? createFromBuilder(builder) 截圖成功PixelMap 393x78」截圖次數(shù) 3——createFromBuilder 從 CustomBuilder 截圖驗(yàn)證截圖存文件態(tài)點(diǎn)擊「⑦ 截圖存文件」按鈕savedFilePath 顯示「/data/storage/…/cache/snapshot_*.jpeg」截圖次數(shù) 4——PixelMap 存文件驗(yàn)證image.createImagePacker fs.writeSync四、真解法鴻蒙 componentSnapshot 的三個(gè)場(chǎng)景場(chǎng)景 1get(id) 異步截圖 getSync(id) 同步截圖——90% 場(chǎng)景首選get/getSync 截圖用componentSnapshot.get(id)componentSnapshot.getSync(id)// ? 場(chǎng)景 1get(id) 異步截圖 getSync(id) 同步截圖API 10/1290% 場(chǎng)景首選 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% 場(chǎng)景首選返回 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跨平臺(tái)atomicservice原子化服務(wù)SnapshotOptionsAPI 15SnapshotRegion/left/right/top/bottom 矩形區(qū)域截圖。場(chǎng)景 2createFromBuilder(builder) 從 CustomBuilder 截圖createFromBuilder 截圖用componentSnapshot.createFromBuilder(MyBuilder)Builder裝飾函數(shù)// ? 場(chǎng)景 2createFromBuilder(builder) 從 CustomBuilder 截圖API 10 import componentSnapshot from ohos.arkui.componentSnapshot // ? Builder 裝飾的函數(shù)是 CustomBuilder 類(lèi)型createFromBuilder 的 builder 參數(shù) Builder function MySnapshotBuilder() { Column({ space: 4 }) { Text(CustomBuilder 截圖內(nèi)容).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 參數(shù)是 CustomBuilderBuilder 函數(shù)引用不是 Component 實(shí)例 const pixelMap: image.PixelMap await componentSnapshot.createFromBuilder(MySnapshotBuilder) // ? createFromBuilder 也有 callback 和 delay/checkImageStatus/options 參數(shù) // componentSnapshot.createFromBuilder(MyBuilder, 500, true, options) // delay500ms, checkImageStatustrue } // createFromBuilder 從 CustomBuilder 截圖builder 參數(shù)是 Builder 函數(shù)引用不是 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裝飾的函數(shù)類(lèi)型傳函數(shù)引用MyBuilder不是調(diào)用MyBuilder()delay延遲截圖毫秒數(shù)等組件渲染完checkImageStatus檢查圖片狀態(tài)true 等圖片加載完再截圖鴻蒙坑builder 參數(shù)傳 Component 實(shí)例或 build() 返回值會(huì)類(lèi)型錯(cuò)——必須傳Builder裝飾的函數(shù)引用。場(chǎng)景 3PixelMap 存文件——image.createImagePacker fs.writeSyncPixelMap 存文件用image.createImagePacker().packing()打包 JPEG buffer fs.writeSync寫(xiě)文件// ? 場(chǎng)景 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 打開(kāi)文件 fs.writeSync 寫(xiě) buffer fs.closeSync 關(guān)文件 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) 關(guān)文件 } // PixelMap 存文件image.createImagePacker().packing JPEG buffer fs.writeSync(fd, buffer)鴻蒙 PixelMap 存文件 API 真名坑image.createImagePacker(): image.ImagePacker創(chuàng)建打包器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同步打開(kāi)文件API 10.fd取文件描述符fs.writeSync(fd: number, buffer: ArrayBuffer)同步寫(xiě) bufferAPI 10第一參傳 fd 文件描述符不是 File 實(shí)例fs.closeSync(fd: number)同步關(guān)文件鴻蒙坑fs.writeSync第一參傳file.fd文件描述符不是 File 實(shí)例方法是 namespace 頂層函數(shù)getContext(this)已 deprecated 警告但仍可用推薦用this.getContext()或組件 Context。五、一句話哲學(xué)寫(xiě)鴻蒙 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編譯錯(cuò)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 參數(shù)是Builder裝飾的函數(shù)引用不是 Component 實(shí)例有 delay/checkImageStatus/options 參數(shù)image.createImagePacker().packing(pixelMap, { format: image/jpeg, quality: 90 })打包 PixelMap 為 JPEG bufferformat 是image/jpeg不是jpegfs.writeSync(fd, buffer)寫(xiě)文件第一參傳file.fd文件描述符是 namespace 頂層函數(shù)不是 File 實(shí)例方法。componentSnapshot 返回 image.PixelMap 像素圖不是 dataURL 字符串是鴻蒙 6.1 arkui.componentSnapshot 組件截圖坑核心能力系列回鏈鴻蒙 7.0 新特性篇 1~17沉浸式毛玻璃/Component3D/智能體框架/方舟引擎/星盾安全/星河互聯(lián)/空間音頻/可變字體/游戲快啟/分布式數(shù)據(jù)盾/LTPO 可變幀率/AI 文檔識(shí)別/多形態(tài)服務(wù)窗口/AI 反詐/機(jī)密計(jì)算/空間計(jì)算/小藝全面進(jìn)化鴻蒙 6.1 API 23 開(kāi)發(fā)坑系列篇 1「ArkUI.modifier 裝飾器坑」——attributeModifier AttributeModifier 狀態(tài)化節(jié)點(diǎn)修改器鴻蒙 6.1 API 23 開(kāi)發(fā)坑系列篇 2「arkui.componentSnapshot 組件截圖坑」——get/getSync/createFromBuilder 返回 image.PixelMap本文真機(jī) demo 完整代碼// 鴻蒙 6.1 API 23 開(kāi)發(fā)坑系列篇 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 截圖內(nèi)容).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 (無(wú)錯(cuò)) 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 (無(wú)錯(cuò)) } catch (e) { this.lastError ? get 異步截圖錯(cuò) e.message } } demonstrateSyncSnapshot() { try { const pixelMap: image.PixelMap componentSnapshot.getSync(snapshotTarget) this.syncSnapshotStatus ? componentSnapshot.getSync(id) 同步截圖成功返回 image.PixelMap不用 await this.snapshotCount this.lastError (無(wú)錯(cuò)) } catch (e) { this.lastError ? getSync 同步截圖錯(cuò) 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 (無(wú)錯(cuò)) } catch (e) { this.lastError ? createFromBuilder 截圖錯(cuò) 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 錯(cuò) 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 (無(wú)錯(cuò)) } catch (e) { this.lastError ? 截圖存文件錯(cuò) 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(截圖目標(biāo)組件idsnapshotTarget).fontSize(12).fontColor(#dc3545).fontWeight(FontWeight.Bold) Text(componentSnapshot.get(snapshotTarget) 截這個(gè) 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(場(chǎng)景 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(場(chǎng)景 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(場(chǎng)景 3createFromBuilder(builder) 從 CustomBuilder 截圖API 10) .fontSize(12).fontColor(#28a745).fontWeight(FontWeight.Bold) Text(builder 參數(shù)是 CustomBuilder 類(lèi)型Builder 裝飾的函數(shù)不是 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(場(chǎng)景 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 組件截圖坑要點(diǎn)) .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 參數(shù)是 CustomBuilderBuilder 函數(shù)不是 Component) .fontSize(8).fontColor(#28a745) Text(⑨ SnapshotOptionsAPI 15SnapshotRegion/left/right/top/bottom 矩形區(qū)域截圖) .fontSize(8).fontColor(#6c757d) Text(⑩ React 對(duì)比componentSnapshot 不是 html2canvas——鴻蒙返回 PixelMap 像素圖不是 dataURL) .fontSize(8).fontColor(#17a2b8) } .width(92%).padding(6).backgroundColor(#f8f9fa).borderRadius(8) Row({ space: 12 }) { Text(截圖次數(shù): ${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(錯(cuò)誤${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) } }寫(xiě)鴻蒙 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編譯錯(cuò)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 參數(shù)是Builder裝飾的函數(shù)引用不是 Component 實(shí)例有 delay/checkImageStatus/options 參數(shù)image.createImagePacker().packing(pixelMap, { format: image/jpeg, quality: 90 })打包 PixelMap 為 JPEG bufferformat 是image/jpeg不是jpegfs.writeSync(fd, buffer)寫(xiě)文件第一參傳file.fd文件描述符是 namespace 頂層函數(shù)不是 File 實(shí)例方法。componentSnapshot 返回 image.PixelMap 像素圖不是 dataURL 字符串是鴻蒙 6.1 arkui.componentSnapshot 組件截圖坑核心