HarmonyOS实战：一招搞定保存图片到相册

前言

保存图片功能几乎是每个应用步调必备的功能之一，当用户遇到喜欢的图片时可以保存得手机相册。那么在鸿蒙中保存图片是否也必要申请用户存储权限以及如何将图片保存到相册，本文将详细讲述怎么保存网络图片，指定布局天生图片保存至相册的功能实现。
实现效果

需求分析

一样平常在 Android 或 iOS 上保存图片都必要申请应用存储权限，否则将克制访问应用存储，不能保存图片到磁盘中。在鸿蒙系统中当然也有存储权限，但是鸿蒙系统对于权限管理十分严酷，一样平常情况下，克制用户申请访问存储权限。但是提供了系统级别的安全控件，不必要用户手动申请权限，用于存储的直接访问。

• 可以使用系统提供的安全控件实现权限的直接访问。
  
• 同时也提供申请权限方式进行存储权限的访问。
  
• 使用网络请求将图片转成流，然后保存成图片。
  

技术实现

申请权限方式

• 权限申请
  

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

复制代码

• 权限判断
  

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

复制代码

安全控件方式

1. SaveButton({ text: SaveDescription.SAVE_IMAGE, buttonType: ButtonType.Normal })
2.            .fontColor(Color.White)
3.            .fontWeight(FontWeight.Medium)
4.            .onClick(async (event: ClickEvent, result: SaveButtonOnClickResult) => {
5.              if (result == SaveButtonOnClickResult.SUCCESS) {
6.                try {
7.                  this.saveImage()
8.                } catch (error) {
9.                  console.error("error is " + JSON.stringify(error));
10.                }
11.              }
12.            })

复制代码

可以看出通过系统安全控件 SaveButton 可以暂时访问系统存储，不必要申请任何权限。更好的掩护用户隐私安全，这也是鸿蒙官方提倡使用的方式。

网络图片保存

• 下载图片，并将数据转化为 ArrayBuffer 范例。
  

1. /**
2.    * 通过http的request方法从网络下载图片资源
3.    */
4.   static async getPicture(url:string) {
5.     http.createHttp()
6.       .request(url,
7.         (error: Error, data: http.HttpResponse) => {
8.           if (error) {
9.             showShortCenterToast("图片保存失败")
10.             return;
11.           }
12.           // 判断网络获取到的资源是否为ArrayBuffer类型
13.           if (data.result instanceof ArrayBuffer) {
14.             FileSaveManager.saveImageToPhoto(data.result as ArrayBuffer)
15.           }
16.         }
17.       )
18.   }

复制代码

• 保存图片到相册
  

1.   /**
2.    * 保存ArrayBuffer到图库
3.    * @param buffer：图片ArrayBuffer
4.    * @returns
5.    */
6.   static async saveImageToPhoto(buffer: ArrayBuffer | string): Promise<void> {
7.     const context = getContext() as common.UIAbilityContext; // 获取getPhotoAccessHelper需要的context
8.     const helper = photoAccessHelper.getPhotoAccessHelper(context); // 获取相册管理模块的实例
9.     const uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg'); // 指定待创建的文件类型、后缀和创建选项，创建图片或视频资源
10.     const file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
11.     let r =  await fs.write(file.fd, buffer);
12.     await fs.close(file.fd);
13.     showShortCenterToast("图片保存成功")
14.   }

复制代码

指定布局保存

在 Android 或 iOS 中，常常会遇到必要保存指定样式的布 View 为图片。Android 中则必要使用 View 的绘制，将布局绘制出来后，再进行保存。但是在鸿蒙中实现起来就比力简单。
1. 将必要保存的 View 布局指定 Id。

1.   Column() {
2.     //布局样式
3.   }
4. .id("root")

复制代码

• 通过 id 将 View 保存成图片。
  

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

复制代码

总结

对比 Android 或 iOS 来说，鸿蒙在实现功能上相对简单，比力容易上手。但是鸿蒙对于用户权限的获取要求比力严酷，正式上线一样平常都必要使用系统提供的安全组件访问应用步调的相册或存储，日常开发中必要十分注意，以免影响项目的正常上线。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。