纯血鸿蒙APP实战开发——图片选择和下载保存案例

144 篇文章 3 订阅
31 篇文章 0 订阅

介绍

本示例介绍图片相关场景的使用:包含访问手机相册图片、选择预览图片并显示选择的图片到当前页面,下载并保存网络图片到手机相册或到指定用户目录两个场景。

效果图预览

使用说明

  1. 从主页通用场景集里选择图片选择和下载保存进入首页。
  2. 分两个场景
  • 点击“下载保存图片”文字,“下载网络图片到手机相册”场景示例。点击“下载”按钮,将图片保存到图库。点击“下载到指定路径”按钮,将图片保存到用户选择的指定路径,
  • 点击“选择图片”文字进入”访问手机相册图片预览并选择”场景示例。点击下部“+”选择图片并显示到页面中。

实现思路

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

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

  1. 创建文件类型为图片的,并最大预览数量为2的图库实例。
async getFileAssetsFromType(){
  const photoSelectOptions = new picker.PhotoSelectOptions(); // 创建图库对象实例
  photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; // 选择媒体文件类型为Image
  photoSelectOptions.maxSelectNumber = 2; // 选择媒体文件的最大数目
 }
  1. 通过photoViewPicker.select()接口,通过传入参数PhotoSaveOptions图库对象,获取返回的用户选择的图片信息。
  async getFileAssetsFromType(){  
    photoViewPicker.select(photoSelectOptions)
      .then((photoSelectResult) => { 
        this.uris = photoSelectResult.photoUris; // select返回的uri权限是只读权限,需要将uri写入全局变量@State中即可根据结果集中的uri进行读取文件数据操作。
      })
      .catch((err: BusinessError) => {
       console.info('Invoke photoViewPicker.select failed, code is ${err.code},message is ${err.message}');
      })
  }
场景2:下载并保存网络图片
  1. 通过http中request方法获取在线图片数据。
http.createHttp()
  .request('https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/Shopping/OrangeShopping/feature/navigationHome/src/main/resources/base/media/product002.png',
    (error: BusinessError, data: http.HttpResponse) => {
      if (error) {
        promptAction.showToast({
          message: $r("app.string.photopickandsave_image_request_fail"),
          duration: 2000
        })
        return
      }
      this.transcodePixelMap(data);
      if (data.result instanceof ArrayBuffer) {
        this.imageBuffer = data.result as ArrayBuffer;
      }
    })
  1. 使用createPixelMap方法将获取到的图片数据转换成pixelmap展示到页面中
// 将ArrayBuffer类型的图片装换为PixelMap类型
transcodePixelMap(data: http.HttpResponse) {
  let code: http.ResponseCode | number = data.responseCode;
  if (ResponseCode.ResponseCode.OK === code) {
    let imageData: ArrayBuffer = data.result as ArrayBuffer;
    let imageSource: image.ImageSource = image.createImageSource(imageData);

    class tmp {
      height: number = 100;
      width: number = 100;
    };

    let options: Record<string, number | boolean | tmp> = {
      'alphaType': 0, // 透明度
      'editable': false, // 是否可编辑
      'pixelFormat': 3, // 像素格式
      'scaleMode': 1, // 缩略值
      'size': { height: 100, width: 100 }
    }; // 创建图片大小

    imageSource.createPixelMap(options).then((pixelMap: PixelMap) => {
      this.image = pixelMap;
      this.isShow = true
    });
  }
}
  1. 将图片保存到图库或者用户选择的路径

    • 使用getPhotoAccessHelper、createAsset、fs.open、fs.write等接口将数据存到本地图库中
      async saveImage(buffer: ArrayBuffer | string): Promise<void> {
        let context = getContext(this) as common.UIAbilityContext;
        let helper = photoAccessHelper.getPhotoAccessHelper(context);
        let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg');
        let file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
        await fs.write(file.fd, buffer);
        await fs.close(file.fd);
      }
    
    • 使用photoViewPicker.save、fs.open、fs.write等接口将数据存到用户选择路径的数据库中
      async pickerSave(buffer: ArrayBuffer | string): Promise<void> {
        const photoSaveOptions = new picker.PhotoSaveOptions(); // 创建文件管理器保存选项实例
        photoSaveOptions.newFileNames = ['PhotoViewPicker ' + new Date().getTime() + 'jpg'] // 保存文件名(可选)
        const photoViewPicker = new picker.PhotoViewPicker;
        photoViewPicker.save(photoSaveOptions)
          .then(async (photoSvaeResult) => {
            console.info('PhotoViewPicker.save successfully,photoSvaeResult uri:' + JSON.stringify(photoSvaeResult));
            let uri = photoSvaeResult[0];
            let file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
            await fs.write(file.fd, buffer);
            await fs.close(file.fd);
            promptAction.showToast({
              message: $r("app.string.photopickandsave_save_picture"),
              duration: 2000
            })
          })
      }
    

高性能知识点

不涉及

工程结构&模块类型

picturemanage                                   // har类型
|---src/main/ets/components
|   |---SelectPictures.ets                      // 场景一:访问手机相册图片预览并选择 
|   |---SaveNetWorkPictures.ets                 // 场景二:下载网络图片并保存到手机相册或用户选择的文件夹
|   |---PictureManage.ets                       // 视图层-主页面,三个场景入口

模块依赖

依赖har包-common库中UX标准

参考资料

photoViewPicker参考文档

为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙开发学习手册》:

如何快速入门:https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
鸿蒙开发app实战源码是指使用鸿蒙系统来开发应用程序所涉及的源代码示例。鸿蒙系统是由华为公司推出的全场景分布式操作系统,旨在为开发者提供更简单、高效的应用开发环境。 鸿蒙开发app实战源码包括了开发鸿蒙应用所需的各种源代码示例,其中包括界面布局、事件处理、数据交互等核心功能的实现方法。通过学习这些源码示例,开发人员可以更深入了解鸿蒙系统的开发方式和特性,从而更快地上手开发鸿蒙应用。 鸿蒙开发app实战源码通常包含以下几个方面的内容: 1. 页面布局示例:展示了如何使用鸿蒙系统提供的布局组件来构建应用界面,包括线性布局、网格布局等。 2. 事件处理示例:介绍了如何处理用户的各种操作事件,比如点击、触摸等,以及如何响应这些事件并进行相应的处理逻辑。 3. 数据交互示例:演示了如何使用鸿蒙系统提供的数据交互接口与后台服务器进行数据交互,包括发送请求、接收响应等。 通过实际的源码示例,开发人员可以更加直观地了解鸿蒙系统的开发流程和技术细节,加速自己的学习和开发进度。同时,源码示例也为开发人员提供了一些最佳实践和经验总结,可以帮助他们更好地编写高质量的鸿蒙应用代码。 总之,鸿蒙开发app实战源码是开发者学习和掌握鸿蒙应用开发的重要资源,通过学习这些源码示例,开发人员能够更好地开发出符合用户需求和有良好用户体验的鸿蒙应用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值