HarmonyOS 如何将指定布局内容保存为图片，并保存到相册？

Question

做一个功能，点击按钮，然后保存指定的部分组件内容为图片，然后保存到相册，如何实现呢

Answer 1

尝试使用组件截图功能componentSnapshot

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-componentsnapshot-V5

安全控件保存：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-security-components-savebutton-V5\#savedescription%E6%9E%9A%E4%B8%BE%E8%AF%B4%E6%98%8E

参考demo:

import { componentSnapshot } from '@kit.ArkUI';
import { image } from '@kit.ImageKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import fs from '@ohos.file.fs';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct ComponentSnapshotPage {
  @State message: string = 'Hello World';

  @State pixmap:image.PixelMap |null = null
  build() {
    Column(){
      Column(){
        Image($r('app.media.app_icon')).width(100).height(100).margin(5)
        Text("这是一串文字")
        Text("这是一串文字")
      }.width(200).height(200).id('hello').backgroundColor(Color.White)

      Image(this.pixmap).width(200).height(200).margin(10)

      SaveButton({text:SaveDescription.SAVE,buttonType:ButtonType.Capsule}).onClick(async (event:ClickEvent, result:SaveButtonOnClickResult) => {
        if (result == SaveButtonOnClickResult.SUCCESS) {
          componentSnapshot.get("hello", async (error: Error, pixmap: image.PixelMap) => {
            this.pixmap = pixmap

            let packOpts: image.PackingOption = { format: "image/jpeg", quality: 100 };
            const imagePackerApi = image.createImagePacker();
            imagePackerApi.packing(pixmap, packOpts).then(async (buffer: ArrayBuffer) => {
              try {
                const context = getContext(this)
                let helper = photoAccessHelper.getPhotoAccessHelper(context)
                let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg')
                let file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE)
                await fs.write(file.fd, buffer);
                // 关闭文件
                await fs.close(file.fd);
              } catch (error) {
                console.error("error is " + JSON.stringify(error))
              }
            }).catch((error: BusinessError) => {
              console.error('Failed to pack the image. And the error is: ' + error);
            })
          })
        }
      })
    }
    .height('100%')
    .width('100%')
  }
}