HarmonyOS view生成图片，然后保存到相册

思路如下

//1.海报布局
Column() {
  // 顶部图片
  this.renderImage(this.isHiresSong)

  // hire音质
  if (this.labelInfoJson !== null || this.labelInfoJson !== undefined) {
    this.renderHiresLabel()
  }

  // 歌词
  if (this.selectLyricList.length > 0) {
    this.renderLyric()
  }

  // 标题、作者
  this.renderTitleInfo(this.selectLyricList.length > 0)

  // 水印、二维码
  this.renderWatermarkQrc()
}
.id('placard_layout')
.backgroundColor(this.bgColor)
.margin({ top: '25vp', bottom: '48vp', left: '30vp', right: '30vp' })
.padding({ top: '16vp', bottom: '16vp', left: '16vp', right: '16vp' })
//2.存储前先判断权限（如果是应用内存储不需要权限）
注意：ohos.permission.WRITE_IMAGEVIDEO是系统权限system_basic，如果是普通应用需要通过ACL提权，
let content: Context = getContext(this)
let permissions: Array<Permissions> = ['ohos.permission.WRITE_IMAGEVIDEO']
let atManager = abilityAccessCtrl.createAtManager();
let promise = atManager.requestPermissionsFromUser(content, permissions);
let rejectNum = 0;
promise.then(async (data) => {
  let grant: number[] = data.authResults;
  let grantName: string[] = data.permissions;
  for (let i = 0; i < grant.length; i++) {
    if (grant[i] !== 0) {
      console.info(TAG, 'user reject permission request ' + grantName[i]);
      /* 用户拒绝权限 */
      rejectNum++;
    }
  }
  if (rejectNum > 0) {
    promptAction.showToast({ message: '拒绝权限' })
  } else {
    this.savePlacard()
  }
}).catch((err: Error) => {
  console.error(TAG, ' requestPermissionsFromUser, error = ' + err);
});
//3.存储
通过componentSnapshot.get(“placard_layout”)提供获取组件截图的能力，包括已加载的组件的截图和没有加载的组件的截图，返回image.PixelMap
组件截图只能够截取组件大小的区域，如果组件的绘制超出了它的区域，或子组件的绘制超出了父组件的区域，这些在组件区域外绘制的内容不会在截图中呈现。
componentSnapshot.get("placard_layout")
  .then((pixmap: image.PixelMap) => {
    this.pixmap = pixmap;
    // 选择存储方式
    ...
  })
//1)、直接存储到应用存储空间
image.createImagePacker().packing(pixmap, { format: "image/jpeg", quality: 98 })
  .then(((data: ArrayBuffer): void => {
    let dir = getContext().cacheDir
    let file = fs.openSync(`${dir}/xxx.jpg`, fs.OpenMode.WRITE_ONLY | fs.OpenMode.CREATE | fs.OpenMode.TRUNC)
    let len: number = fs.writeSync(file.fd, data, { encoding: "utf-8" })
    console.log(`${len}`)
  }))
//2)、ohos.file.picker拉起系统文件管理器，用户选择文件保存路径，返回uri
const photoSaveOptions = new picker.PhotoSaveOptions(); // 创建文件管理器
photoSaveOptions.newFileNames = [fileName + '.png'];
const photoViewPicker = new picker.PhotoViewPicker();
photoViewPicker.save(photoSaveOptions)
  .then((photoSaveResult) => {
    console.log(TAG, "photoSaveUri  photoSaveResult[0]" + JSON.stringify(photoSaveResult[0]))
    this.photoSaveUri = photoSaveResult[0]
  })
  .catch((err:Error) => {
    console.log(TAG, "photoSaveUri  fail" + JSON.stringify(err))
    promptAction.showToast({message:'保存失败'})
  })
//3)、通过photoAccessHelper存储到相册
let photoType = photoAccessHelper.PhotoType.IMAGE;
let extension = 'jpg';
const context = getContext(this);
let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);

phAccessHelper.createAsset(photoType, extension, {
  title: fileName
}, (err, uri) => {
  if (uri != undefined) {
    console.info(TAG + 'createAsset uri' + uri);
    this.photoSaveUri = uri
    console.info(TAG + 'createAsset successfully');
  } else {
    console.error(TAG + 'createAsset failed, message = ', err);
  }
});
//完成后图片并没有存储，还需要执行写文件操作
pixmap: image.PixelMap | undefined = undefined;
@State @Watch("onPhotoSaveUriUpdate") photoSaveUri: string = '';

// 监听uri的更新，进行用户文件读写操作
onPhotoSaveUriUpdate() {
  if (this.photoSaveUri) {
    console.error(TAG, 'photoSaveUri is: ' + JSON.stringify(this.photoSaveUri));
    // 创建图像编码ImagePacker对象
    const imagePacker = image.createImagePacker();
    // 设置编码输出流和编码参数,进行图片编码
    if (this.pixmap === undefined) {
      return
    }
    imagePacker.packing(this.pixmap, { format: "image/jpeg", quality: 100 })
      .then(data => {
        // 打开文件
        let file = fs.openSync(this.photoSaveUri, fs.OpenMode.WRITE_ONLY);
        // 编码成功，写操作
        fs.writeSync(file.fd, data);
        fs.closeSync(file);
        promptAction.showToast({
          message: '已成功保存至相册',
          duration: 1000
        })
      })
      .catch((error: Error) => {
        console.error(TAG, 'Failed to pack the image. And the error is: ' + error);
      })
  }
}
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.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.