前言

保存圖片功能幾乎是每個應(yīng)用程序必備的功能之一，當用戶遇到喜歡的圖片時可以保存到手機相冊。那么在鴻蒙中保存圖片是否也需要申請用戶存儲權(quán)限以及如何將圖片保存到相冊，本文將詳細講述怎么保存網(wǎng)絡(luò)圖片，指定布局生成圖片保存至相冊的功能實現(xiàn)。

實現(xiàn)效果

需求分析

一般在 Android 或 iOS 上保存圖片都需要申請應(yīng)用存儲權(quán)限，否則將禁止訪問應(yīng)用存儲，不能保存圖片到磁盤中。在鴻蒙系統(tǒng)中當然也有存儲權(quán)限，但是鴻蒙系統(tǒng)對于權(quán)限管理十分嚴格，一般情況下，禁止用戶申請訪問存儲權(quán)限。但是提供了系統(tǒng)級別的安全控件，不需要用戶手動申請權(quán)限，用于存儲的直接訪問。

1. 可以使用系統(tǒng)提供的安全控件實現(xiàn)權(quán)限的直接訪問。
2. 同時也提供申請權(quán)限方式進行存儲權(quán)限的訪問。
3. 使用網(wǎng)絡(luò)請求將圖片轉(zhuǎn)成流，然后保存成圖片。

技術(shù)實現(xiàn)

申請權(quán)限方式

1. 權(quán)限申請

const permissions: Array< Permissions > = [
  'ohos.permission.WRITE_IMAGEVIDEO'
];
const context = getContext(this) as common.UIAbilityContext;
const atManager = abilityAccessCtrl.createAtManager();
await atManager.requestPermissionsFromUser(context, permissions);

2. 權(quán)限判斷

PermissionUtil.checkAccessToken(permissions[0]).then((status)= >{
            if (status == abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED) {
              FileSaveManager.getPicture(this.imagePath)
            }else{
              PermissionUtil.openPermissionsInSystemSettings(getContext(this) as common.UIAbilityContext)
            }
   })

安全控件方式

SaveButton({ text: SaveDescription.SAVE_IMAGE, buttonType: ButtonType.Normal })
           .fontColor(Color.White)
           .fontWeight(FontWeight.Medium)
           .onClick(async (event: ClickEvent, result: SaveButtonOnClickResult) = > {
             if (result == SaveButtonOnClickResult.SUCCESS) {
               try {
                 this.saveImage()
               } catch (error) {
                 console.error("error is " + JSON.stringify(error));
               }
             }
           })

可以看出通過系統(tǒng)安全控件 SaveButton 可以臨時訪問系統(tǒng)存儲，不需要申請任何權(quán)限。更好的保護用戶隱私安全，這也是鴻蒙官方提倡使用的方式。

網(wǎng)絡(luò)圖片保存

1. 下載圖片，并將數(shù)據(jù)轉(zhuǎn)化為 ArrayBuffer 類型。

/**
   * 通過http的request方法從網(wǎng)絡(luò)下載圖片資源
   */
  static async getPicture(url:string) {
    http.createHttp()
      .request(url,
        (error: Error, data: http.HttpResponse) = > {
          if (error) {
            showShortCenterToast("圖片保存失敗")
            return;
          }
          // 判斷網(wǎng)絡(luò)獲取到的資源是否為ArrayBuffer類型
          if (data.result instanceof ArrayBuffer) {
            FileSaveManager.saveImageToPhoto(data.result as ArrayBuffer)
          }
        }
      )
  }

2. 保存圖片到相冊

/**
   * 保存ArrayBuffer到圖庫
   * @param buffer：圖片ArrayBuffer
   * @returns
   */
  static async saveImageToPhoto(buffer: ArrayBuffer | string): Promise< void > {
    const context = getContext() as common.UIAbilityContext; // 獲取getPhotoAccessHelper需要的context
    const helper = photoAccessHelper.getPhotoAccessHelper(context); // 獲取相冊管理模塊的實例
    const uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg'); // 指定待創(chuàng)建的文件類型、后綴和創(chuàng)建選項，創(chuàng)建圖片或視頻資源
    const file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
    let r =  await fs.write(file.fd, buffer);
    await fs.close(file.fd);
    showShortCenterToast("圖片保存成功")
  }

指定布局保存

在 Android 或 iOS 中，經(jīng)常會遇到需要保存指定樣式的布 View 為圖片。Android 中則需要使用 View 的繪制，將布局繪制出來后，再進行保存。但是在鴻蒙中實現(xiàn)起來就比較簡單。

** 1. 將需要保存的 View 布局指定 Id。**

Column() {
    //布局樣式
  } 
.id("root")

2. 通過 id 將 View 保存成圖片。

componentSnapshot.get("photo", (error: Error, pixmap: image.PixelMap) = > {
                  if (error) {
                    console.log("error: " + JSON.stringify(error))
                    return;
                  }
                  const  packOpts : image.PackingOption = { format:"image/jpeg", quality:98 };
                  imagePackerApi.packing(pixmap, packOpts).then( async (data : ArrayBuffer) = > {
                    FileSaveManager.saveImageToPhoto(data)
                  }).catch((error : BusinessError) = > {
                    console.error('Failed to pack the image. And the error is: ' + error);
                  })
                })

總結(jié)

對比 Android 或 iOS 來說，鴻蒙在實現(xiàn)功能上相對簡單，比較容易上手。但是鴻蒙對于用戶權(quán)限的獲取要求比較嚴格，正式上線一般都需要使用系統(tǒng)提供的安全組件訪問應(yīng)用程序的相冊或存儲，日常開發(fā)中需要十分注意，以免影響項目的正常上線。