鸿蒙HarmonyOS 5.0开发实战：图片选择和下载保存实现案例 ...

 往期鸿蒙5.0全套实战文章必看：（文中附带鸿蒙5.0全栈学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开发实战学习门路
  
• 鸿蒙HarmonyOS NEXT开发技术最全学习门路指南
  
• 鸿蒙应用开发实战项目，看这一篇文章就够了（部门项目附源码）
  

---

介绍

本示例介绍图片相干场景的使用：包含访问手机相册图片、选择预览图片并显示选择的图片到当前页面，下载并保存网络图片到手机相册或到指定用户目次，从web页面保存图片到相册三个场景。
结果图预览

使用说明

• 从主页通用场景集里选择图片选择和下载保存进入首页。
  
• 分三个场景
  

• 点击“下载保存图片”文字，“下载网络图片到手机相册”场景示例。点击“下载”按钮，将图片保存到图库。点击“下载到指定路径”按钮，将图片保存到用户选择的指定路径，
  
• 点击“选择图片”文字进入”访问手机相册图片预览并选择”场景示例。点击下部“+”选择图片并显示到页面中。
  
• 长按web图片，弹出”是否保存图片“弹窗，点击”保存“后，弹出权限获取弹窗，给予权限后即可保存图片到相册。
  

实现思路

场景1：访问手机相册图片预览并选择

通过photoViewPicker.select()拉起图库界面，用户可以预览并选择一个或多个文件，即可实现拉起手机相册并进行图片的预览与选择。

• 创建文件范例为图片的，并最大预览数量为2的图库实例。
  

1. async getFileAssetsFromType(){
2.   const photoSelectOptions = new picker.PhotoSelectOptions(); // 创建图库对象实例
3.   photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; // 选择媒体文件类型为Image
4.   photoSelectOptions.maxSelectNumber = 2; // 选择媒体文件的最大数目
5. }

复制代码

• 通过photoViewPicker.select()接口,通过传入参数PhotoSaveOptions图库对象，获取返回的用户选择的图片信息。
  

1.   async getFileAssetsFromType(){  
2.     photoViewPicker.select(photoSelectOptions)
3.       .then((photoSelectResult) => {
4.         this.uris = photoSelectResult.photoUris; // select返回的uri权限是只读权限，需要将uri写入全局变量@State中即可根据结果集中的uri进行读取文件数据操作。
5.       })
6.       .catch((err: BusinessError) => {
7.        console.info('Invoke photoViewPicker.select failed, code is ${err.code},message is ${err.message}');
8.       })
9.   }

复制代码

场景2：下载并保存网络图片

• 通过http中request方法获取在线图片数据。
  

1. http.createHttp()
2.   .request('https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/Shopping/OrangeShopping/feature/navigationHome/src/main/resources/base/media/product002.png',
3.     (error: BusinessError, data: http.HttpResponse) => {
4.       if (error) {
5.         promptAction.showToast({
6.           message: $r("app.string.photopickandsave_image_request_fail"),
7.           duration: 2000
8.         })
9.         return
10.       }
11.       this.transcodePixelMap(data);
12.       if (data.result instanceof ArrayBuffer) {
13.         this.imageBuffer = data.result as ArrayBuffer;
14.       }
15.     })

复制代码

• 使用createPixelMap方法将获取到的图片数据转换成pixelmap展示到页面中
  

1. // 将ArrayBuffer类型的图片装换为PixelMap类型
2. transcodePixelMap(data: http.HttpResponse) {
3.   let code: http.ResponseCode | number = data.responseCode;
4.   if (ResponseCode.ResponseCode.OK === code) {
5.     let imageData: ArrayBuffer = data.result as ArrayBuffer;
6.     let imageSource: image.ImageSource = image.createImageSource(imageData);
8.     class tmp {
9.       height: number = 100;
10.       width: number = 100;
11.     };
13.     let options: Record<string, number | boolean | tmp> = {
14.       'alphaType': 0, // 透明度
15.       'editable': false, // 是否可编辑
16.       'pixelFormat': 3, // 像素格式
17.       'scaleMode': 1, // 缩略值
18.       'size': { height: 100, width: 100 }
19.     }; // 创建图片大小
21.     imageSource.createPixelMap(options).then((pixelMap: PixelMap) => {
22.       this.image = pixelMap;
23.       this.isShow = true
24.     });
25.   }
26. }

复制代码

• 将图片保存到图库或者用户选择的路径
  
  
  
  • 使用getPhotoAccessHelper、createAsset、fs.open、fs.write等接口将数据存到本地图库中
    
  1.   async saveImage(buffer: ArrayBuffer | string): Promise<void> {
  2.     let context = getContext(this) as common.UIAbilityContext;
  3.     let helper = photoAccessHelper.getPhotoAccessHelper(context);
  4.     let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg');
  5.     let file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
  6.     await fs.write(file.fd, buffer);
  7.     await fs.close(file.fd);
  8.   }

  复制代码
    
  
  
  
  • 使用photoViewPicker.save、fs.open、fs.write等接口将数据存到用户选择路径的数据库中
    
  1.   async pickerSave(buffer: ArrayBuffer | string): Promise<void> {
  2.     const photoSaveOptions = new picker.PhotoSaveOptions(); // 创建文件管理器保存选项实例
  3.     photoSaveOptions.newFileNames = ['PhotoViewPicker ' + new Date().getTime() + 'jpg'] // 保存文件名（可选）
  4.     const photoViewPicker = new picker.PhotoViewPicker;
  5.     photoViewPicker.save(photoSaveOptions)
  6.       .then(async (photoSvaeResult) => {
  7.         console.info('PhotoViewPicker.save successfully,photoSvaeResult uri:' + JSON.stringify(photoSvaeResult));
  8.         let uri = photoSvaeResult[0];
  9.         let file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
  10.         await fs.write(file.fd, buffer);
  11.         await fs.close(file.fd);
  12.         promptAction.showToast({
  13.           message: $r("app.string.photopickandsave_save_picture"),
  14.           duration: 2000
  15.         })
  16.       })
  17.   }

  复制代码
  
  

场景3：从web页面保存图片到相册

• 通过onContextMenuShow长按web图片获取图片链接。
  
  1. Web({ src: $rawfile('index.html'), controller: this.controller })
  2.   .onContextMenuShow((event) => {
  3.     // 判断是否是图片
  4.     if (event && event.param.existsImageContents()) {
  5.       // 获取图片链接
  6.       this.imageUrl = event.param.getSourceUrl();
  7.       logger.info(TAG, 'save image url success')
  8.       this.showMenu = true;
  9.     }
  10.     return true;
  11.   })

  复制代码
• 通过request.downloadFile将图片下载到沙箱路径。
  
  1. downloadImage() {
  2.   // 获取沙箱路径
  3.   let filesDir = this.context.filesDir;
  5.   try {
  6.     // 将web页面的图片下载到沙箱路径
  7.     request.downloadFile(this.context, {
  8.       url: this.imageUrl,
  9.       filePath: `${filesDir}/savePictureFromWeb.png`
  10.     }).then((downloadTask: request.DownloadTask) => {
  11.       downloadTask.on('complete', async () => {
  12.         logger.info(TAG, 'download image succeed');
  13.         // 下载成功后图片的沙箱路径
  14.         const srcFileUris: string[] = [`${filesDir}/savePictureFromWeb.png`];
  15.         await this.saveImage(srcFileUris);
  16.       })
  17.     }).catch((err: BusinessError) => {
  18.       logger.error(TAG, `wq Invoke downloadTask failed, code is ${err.code}, message is ${err.message}`);
  19.     });
  20.   }catch (error){
  21.     logger.error(TAG, `download image failed, code is: ${error.code}, message is: ${error.message}`);
  22.   }
  23. }

  复制代码
• 通过phAccessHelper.showAssetsCreationDialog获取保存图片到相册的权限，将图片保存到相册。
  
  1. async saveImage(srcFileUris: Array<string>) {
  2.   let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(this.context);
  3.   try {
  4.     let photoCreationConfigs: Array<photoAccessHelper.PhotoCreationConfig> = [
  5.       {
  6.         title: 'test',
  7.         fileNameExtension: 'png',
  8.         photoType: photoAccessHelper.PhotoType.IMAGE,
  9.         subtype: photoAccessHelper.PhotoSubtype.DEFAULT,
  10.       }
  11.     ];
  12.     // 拉起授予权限的弹窗，获取将图片保存到相册的权限
  13.     let desFileUris: Array<string> = await phAccessHelper.showAssetsCreationDialog(srcFileUris, photoCreationConfigs);
  14.     logger.info(TAG, 'showAssetsCreationDialog success, data is:' + desFileUris);
  15.     // 转换为uri
  16.     let uri: string = fileUri.getUriFromPath(srcFileUris[0]);
  17.     // 打开沙箱路径下图片
  18.     const file: fs.File = fs.openSync(uri, fs.OpenMode.READ_WRITE);
  19.     // 读取沙箱路径下图片为buffer
  20.     const photoSize: number = fs.statSync(file.fd).size;
  21.     let arrayBuffer: ArrayBuffer = new ArrayBuffer(photoSize);
  22.     let readLength: number = fs.readSync(file.fd, arrayBuffer);
  23.     let imageBuffer: ArrayBuffer = buffer.from(arrayBuffer, 0, readLength).buffer;
  24.     try {
  25.       // 打开相册下路径
  26.       let fileInAlbum = await fs.openSync(desFileUris[0], fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
  27.       // 写入相册
  28.       await fs.write(fileInAlbum.fd, imageBuffer);
  29.       // 关闭文件
  30.       await fs.close(file.fd);
  31.       await fs.close(fileInAlbum.fd);
  32.       logger.info(TAG, 'save image succeed');
  33.       // 图片保存成功后，删掉沙箱路径下图片
  34.       fs.unlinkSync(srcFileUris[0]);
  35.       promptAction.showToast({
  36.         message: $r('app.string.photo_pick_and_save_success_message'),
  37.         duration: ANIMATION_DURATION
  38.       });
  39.       // 关闭bindPopup
  40.       this.showMenu = false;
  41.     } catch (error) {
  42.       logger.error(TAG, `save image failed, code is: ${error.code}, message is: ${error.message}`);
  43.     }
  44.   } catch (err) {
  45.     logger.error(TAG, `showAssetsCreationDialog failed, errCode is: ${err.code}, message is: ${err.message}`);
  46.   }
  47. }

  复制代码

高性能知识点

不涉及
工程结构&模块范例

1. picturemanage                                   // har类型
2. |---src/main/ets/components
3. |   |---SelectPictures.ets                      // 场景一：访问手机相册图片预览并选择
4. |   |---SaveNetWorkPictures.ets                 // 场景二：下载网络图片并保存到手机相册或用户选择的文件夹
5. |   |---SavePictureFromWeb.ets                  // 场景三：保存web图片到相册
6. |   |---PictureManage.ets                       // 视图层-主页面，三个场景入口
7. |---src/main/ets/utils
8. |   |---Logger.ets                              // 日志打印模块

复制代码

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