前言

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

實現效果

需求分析

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

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

技術實現

申請權限方式

1. 權限申請

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. 權限判斷

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)存儲，不需要申請任何權限。更好的保護用戶隱私安全，這也是鴻蒙官方提倡使用的方式。

網絡圖片保存

1. 下載圖片，并將數據轉化為 ArrayBuffer 類型。

/**
   * 通過http的request方法從網絡下載圖片資源
   */
  static async getPicture(url:string) {
    http.createHttp()
      .request(url,
        (error: Error, data: http.HttpResponse) = > {
          if (error) {
            showShortCenterToast("圖片保存失敗")
            return;
          }
          // 判斷網絡獲取到的資源是否為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 中，經常會遇到需要保存指定樣式的布 View 為圖片。Android 中則需要使用 View 的繪制，將布局繪制出來后，再進行保存。但是在鴻蒙中實現起來就比較簡單。

** 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);
                  })
                })

總結

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