鸿蒙中如何生存图片

 注：实用版本(HarmonyOS NEXT/5.0/API13+)
  鸿蒙系统实现图片生存至相册全流程详解

一、技术实现流程概述

本业务需完成从组件截图到恒久化存储的完整链路，主要分为四大阶段：

• 组件截图天生
  
• 图片数据转换存储
  
• 沙箱文件转公有文件
  
• 媒体库写入与权限管理
  

二、核心实现步骤

步骤1：获取组件截图对象

步骤2：JPEG格式转换与缓存写入

选择JPEG格式的考量（代码有标注）：

• 接纳有损压缩均衡画质与体积
  
• 官方推荐设置98%质量参数（0-100范围）
  
• 克制PNG的无损压缩导致体积过大
  

1. /**
2.    * 保存图片到沙箱, 再从沙箱中读取写入相册
3.    */
4.   async saveImage(){
5.     // 1. 根据组件的id生成截图对象
6.     const pixelMap = await componentSnapshot.get('share')
7.     // 2. 借助ImagePacker去把图片对象生成二级制数据流
8.     const imagePacker = image.createImagePacker()
9.     const arrayBuffer = await imagePacker.packToData(pixelMap,{ format: "image/jpeg", quality: 98 })
10.     // 3. 借助fileIo读写文件
11.     // 3.1 获取上下文
12.     const  ctx = getContext(this)
13.     // 3.2 获取沙箱中存图的路径
14.     const imagePath = ctx.cacheDir + '/' + Date.now() + 'jpeg'
15.     // 3.3 以 创建 或 读写 的模式打开文件(没有则创建并打开, 有则打开)
16.     const file = fileIo.openSync(imagePath,fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE)
17.     // 3.4 同步写入二级制数据流到文件中
18.     fileIo.writeSync(file.fd,arrayBuffer)
19.     // 3.5 同步去关闭文件
20.     fileIo.closeSync(file.fd)
21.     promptAction.showToast({message: '写入成功'})
22.   }

复制代码

步骤3：沙箱文件转存相册

这个时候是没用权限的 必要使用 SaveButton组件 来授权 组件时间一般有30分钟左右 授权一次三十分钟之内不用授权

1. // 3.2 获取沙箱中存图的路径
2.     const imagePath = ctx.cacheDir + '/' + Date.now() + 'jpeg'
3.     // 3.3 以 创建 或 读写 的模式打开文件(没有则创建并打开, 有则打开)
4.     const file = fileIo.openSync(imagePath,fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE)
5.     // 3.4 同步写入二级制数据流到文件中
6.     fileIo.writeSync(file.fd,arrayBuffer)
7.     // 3.5 同步去关闭文件
8.     fileIo.closeSync(file.fd)
10.     // 4. 把沙箱中的文件写入相册
11.     // 4.1 获取资源文件的uri地址  3.2 获取存在沙箱的 路径
12.     const imgUrl = fileUri.getUriFromPath(imagePath)
13.     // 4.2 进行图片资产变更(私有->公有)  要私有变公有 要先获取 再变更,变更看文档 复制 后传参数 上下文和url的地址
14.     const assetChangeRequest = photoAccessHelper.MediaAssetChangeRequest.createImageAssetRequest(ctx,imgUrl)
15.     // 4.3 提交媒体变更请求
16.     // 4.3.1 获取相册管理模块的实例
17.     const phAccessHelper = photoAccessHelper.getPhotoAccessHelper(ctx)
18.     // 4.3.2 调用变更方法
19.     await phAccessHelper.applyChanges(assetChangeRequest)
21.     promptAction.showToast({message: '图片写入成功'})

复制代码

步骤4：权限动态申请与安全组件

1. SaveButton({
2.           icon: SaveIconStyle.FULL_FILLED,//保存按钮展示填充样式图标。
3.           text: SaveDescription.SAVE_IMAGE,//保存按钮的文字描述为“保存图片”。
4.           buttonType: ButtonType.Normal //普通按钮（默认不带圆角）。
5.         })
6. ...
7.           //参数可复制文档实例
8.   .onClick((event:ClickEvent, result:SaveButtonOnClickResult)=>{
9.                //恒等于0
10.             if(result == SaveButtonOnClickResult.SUCCESS){
11.               this.saveImage()
12.             }
13.           })

复制代码

三、关键注意事项

• 路径有效性：沙箱路径必要使用context获取标准目录
  
• 内存管理：及时释放PixelMap资源克制内存走漏
  
• 异常处理：文件IO操作需包裹try-catch块
  
• 权限时效：WRITE_IMAGEVIDEO权限默认有效期30分钟
  
• 格式兼容性：确保设备支持JPEG编码格式
  

四、性能优化建议

• 大图处理建议分块写入
  
• 频仍操作建议使用Worker线程
  
• 可添加进度提示提拔用户体验
  
• 建议对重复生存操作做防抖处理
  

通过以上标准化实现流程，我们可高效完成鸿蒙系统的图片存储业务开发，同时包管应用的稳固性和用户体验。现实开发中需根据详细业务场景调整质量参数和异常处理策略。
总结:
要完成鸿蒙中生存图片业务可以分为以下步骤进行实现:
首先我们要用componentSnapshot组件的get方法获取id天生截图对象
然后借助ImagePacker把图片转化为JPEG二进制数据流(问为什么是JPEG格式1:均衡画质和体积2:官方文档设置98%质量参数克制过度压缩,包管图片清晰度)
这个时候图片数据已经写入编译器的缓存目录了,我们接着必要获取沙箱中存放图片的路径这时还必要借助fileIo文件管理组件 创建或读写的方式打开文件之后同步写入二进制数据中
将图片存储到沙箱之后 这个时候图片是私有的 我们必要把私有变为共有然后获取相册管理权限 终极就可以实现了
接下来把沙箱中的文件写入相册中(先获取上文中写好的url地点,用fileUri.getUriFromPath()获取),用photoAccessHelper.MediaAssetChangeRequest.createImageAssetRequest('上下文','url地点')变私为公
公有完毕之后就可以提交媒体变动请求 接纳applyChanges方法(必要再model.json5中配置权限:permission: ohos.permission.WRITE_IMAGEVIDEO)
这里共同使用SaveButton安全组件获取短时期权限,唤起系统的相册授权(一般是30分钟内不用重复授权)
终极写入相册就完成了此业务

1. import { UserStoreKey } from '../../commons/utils/Auth'
2. import { QuestionDetail, User } from '../../models'
3. import { componentSnapshot, promptAction } from '@kit.ArkUI'
4. import image from '@ohos.multimedia.image'
5. import { fileIo, fileUri } from '@kit.CoreFileKit'
6. import { photoAccessHelper } from '@kit.MediaLibraryKit'
8. @CustomDialog
9. export struct QuestionShareDialog {
10.   @Prop item: QuestionDetail
11.   @StorageProp(UserStoreKey) user: User = {} as User
13.   /**
14.    * 保存图片到沙箱, 再从沙箱中读取写入相册
15.    */
16.   async saveImage(){
17.     // 1. 根据组件的id生成截图对象
18.     const pixelMap = await componentSnapshot.get('share')
19.     // 2. 借助ImagePacker去把图片对象生成二级制数据流
20.     const imagePacker = image.createImagePacker()
21.     const arrayBuffer = await imagePacker.packToData(pixelMap,{ format: "image/jpeg", quality: 98 })
22.     // 3. 借助fileIo读写文件
23.     // 3.1 获取上下文
24.     const  ctx = getContext(this)
25.     // 3.2 获取沙箱中存图的路径
26.     const imagePath = ctx.cacheDir + '/' + Date.now() + '.jpeg'
27.     // 3.3 以 创建 或 读写 的模式打开文件(没有则创建并打开, 有则打开)
28.     const file = fileIo.openSync(imagePath,fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE)
29.     // 3.4 同步写入二级制数据流到文件中
30.     fileIo.writeSync(file.fd,arrayBuffer)
31.     // 3.5 同步去关闭文件
32.     fileIo.closeSync(file.fd)
34.     // 4. 把沙箱中的文件写入相册
35.     // 4.1 获取资源文件的uri地址  3.2 获取存在沙箱的 路径
36.     const imgUrl = fileUri.getUriFromPath(imagePath)
37.     // 4.2 进行图片资产变更(私有->公有)  要私有变公有 要先获取 再变更,变更看文档 复制 后传参数 上下文和url的地址
38.     const assetChangeRequest = photoAccessHelper.MediaAssetChangeRequest.createImageAssetRequest(ctx, imgUrl);
39.     // 4.3 提交媒体变更请求
40.     // 4.3.1 获取相册管理模块的实例
41.     const phAccessHelper = photoAccessHelper.getPhotoAccessHelper(ctx)
42.     // 4.3.2 调用变更方法
43.     // 需要配置权限: permission: ohos.permission.WRITE_IMAGEVIDEO
44.     await phAccessHelper.applyChanges(assetChangeRequest);
46.     // 5. 关闭弹窗
47.     this.controller.close()
49.     promptAction.showToast({message: '图片写入相册成功'})
50.   }
52.   controller: CustomDialogController
53.   build() {
54.     Stack({ alignContent: Alignment.BottomEnd }) {
55.       Column({ space: 20 }) {
56.         Image($r('app.media.ic_interview_logo'))
57.           .width(40)
58.           .height(40)
59.         Text('面试通，搞定企业面试题')
60.         Divider()
61.           .strokeWidth(0.5)
62.           .color($r('app.color.common_gray_border'))
63.         Text('大厂面试题：' + this.item.stem)
64.           .fontSize(12)
65.           .maxLines(2)
66.           .fontWeight(600)
67.           .width('100%')
68.           .lineHeight(24)
69.           .textOverflow({ overflow: TextOverflow.Ellipsis })
70.         QRCode(this.item.id)
71.           .width(160)
72.           .height(160)
73.           .alignSelf(ItemAlign.Center)
74.         Text('扫码查看答案')
75.           .fontSize(12)
76.           .alignSelf(ItemAlign.Center)
77.         Blank()
78.         Text('分享来自：' + this.user.nickName || this.user.username)
79.           .fontSize(12)
80.       }
81.       .id('share')  // 用于后续截图使用
82.       .padding(20)
83.       .alignItems(HorizontalAlign.Start)
84.       .width(300)
85.       .height(500)
86.       .backgroundColor($r('app.color.white'))
89.       Row() {
90.         SaveButton({
91.           icon: SaveIconStyle.FULL_FILLED,//保存按钮展示填充样式图标。
92.           text: SaveDescription.SAVE_IMAGE,//保存按钮的文字描述为“保存图片”。
93.           buttonType: ButtonType.Normal //普通按钮（默认不带圆角）。
94.         })
95.           .fontColor($r('app.color.white'))
96.           .fontSize(14)
97.           .padding(12)
98.           .backgroundColor($r('app.color.common_main_color'))
99.           .onClick((event:ClickEvent, result:SaveButtonOnClickResult)=>{
100.             if(result == SaveButtonOnClickResult.SUCCESS){
101.               this.saveImage()
102.             }
103.           })
104.       }
105.       .borderRadius({ topLeft: 8 })
106.       .clip(true)
107.     }
108.     .borderRadius(8)
109.     .clip(true)
110.   }
111. }

复制代码

以上代码只是单个文件夹的流程图，如需总代码可留下关注私信我~

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