HarmonyOS 如何将当前视图组件保存为图片并保存呢？

import componentSnapshot from '@ohos.arkui.componentSnapshot'  
import image from '@ohos.multimedia.image'  
@Entry  
@Component  
struct waterMarkPage {  
  @State pixmap: image.PixelMap | undefined = undefined  
  build() {  
    Column() {  
      Stack({ alignContent: Alignment.Center }){  
        Image($r('app.media.ic_product02')).autoResize(true).width(300).height(300)  
        Row() {  
          Text("水印").width(40).height(20).fontSize(16).fontColor(Color.White)  
            .border({ color: Color.Red, width: 1 }).borderRadius(4)  
            .margin({top:10,right:10})  
        }  
        .width(300).height(300)  
        .alignItems(VerticalAlign.Top)  
        .justifyContent(FlexAlign.End)  
        Row() {  
          Image($r('app.media.startIcon')).autoResize(true).width(40).height(40).margin({bottom:10,right:10})  
        }  
        .width(300).height(300)  
        .alignItems(VerticalAlign.Bottom)  
        .justifyContent(FlexAlign.End)  
      }  
      .id("root")  
      Button("生成水印图片")  
        .onClick(() => {  
          componentSnapshot.get("root")  
            .then((pixmap: image.PixelMap) => {  
              this.pixmap = pixmap  
            }).catch((err:Error) => {  
            console.log("error: " + err)  
          })  
        }).margin(10)  
      Image(this.pixmap).width(300).height(300).border({ color: Color.Blue, width: 1 }).margin(5)  
    }  
    .width('100%')  
    .height('100%')  
    .alignItems(HorizontalAlign.Center)  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.

async imageWriteAlbumExample(pixelMap:image.PixelMap) {  
  console.info('createAssetDemo');  
  let context = getContext(this);  
  let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);  
  let photoType: photoAccessHelper.PhotoType = photoAccessHelper.PhotoType.IMAGE;  
  let extension:string = 'jpg';  
  let options: photoAccessHelper.CreateOptions = {  
    title: 'testPhoto'  
  }  
  let uri = await phAccessHelper.createAsset(photoType, extension, options);  
  try {  
      // 方式：通过imagePacker写入文件  
      let file: fs.File = fs.openSync(uri, fs .OpenMode.WRITE_ONLY);  
      let imagePacker: image.ImagePacker = image.createImagePacker();  
      let packOpts: image.PackingOption = { format: 'image/jpeg', quality: 100 };  
      await imagePacker.packToFile(pixelMap , file.fd, packOpts);  
      fs.closeSync(file);  
      promptAction.showToast({  
        message: '已保存至相册',  
        duration: 2500  
     });  
  }  
  catch (err) {  
    console.error("error is "+ JSON.stringify(err))  
    promptAction.showToast({  
      message: '保存失败',  
      duration: 2000  
    });  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.