0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙APP开发实战:【Api9】拍照、拍视频;选择图片、视频、文件工具类

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-03-26 16:27 次阅读

鸿蒙开发过程中,经常会进行系统调用,拍照、拍视频、选择图库图片、选择图库视频、选择文件。今天就给大家分享一个工具类。

1.话不多说,先展示样式

1710837728088.gif

2.设计思路

根据官方提供的指南开发工具类,基础的拍照、拍视频、图库选照片、选文件不过多缀述,图库选择这里设计成集合形式,可返回图片和视频,视频展示时不显示内容,所以在工具类多加了一个获取视频缩略图的功能。


![搜狗高速浏览器截图20240326151450.png](//file1.elecfans.com/web2/M00/C5/D1/wKgZomYChGOAUaiiAADe1d8SeRY102.jpg)

**3.具体代码**

import common from '@ohos.app.ability.common';
import picker from '@ohos.file.picker';
import mediaLibrary from '@ohos.multimedia.mediaLibrary';
import wantConstant from '@ohos.ability.wantConstant';
import { MediaBean } from '../bean/MediaBean';
import { StringUtils } from '../utils/StringUtils';

/**

  • @description 多媒体辅助类
  • @author Gwei
  • @time 2024/3/1 15:57
    */
    export class MediaHelper {
    private readonly TAG: string = 'MediaHelper';

private mContext: common.Context;

constructor(context: common.Context) {
this.mContext = context;
}

/**

  • 图库选择,返回最大数量为9的图片、视频集合
    */
    public selectPicture(count:number): Promise< Array< MediaBean >> {
let imgList:Array< string > = [];
let mediaList:Array< MediaBean > = [];
try {
  let photoSelectOptions = new picker.PhotoSelectOptions();
  photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
  photoSelectOptions.maxSelectNumber = 9-count;
  let photoPicker = new picker.PhotoViewPicker();
  return photoPicker.select(photoSelectOptions)
    .then((photoSelectResult) = > {
      //Log.info(this.TAG, 'PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(photoSelectResult));

      if (photoSelectResult && photoSelectResult.photoUris && photoSelectResult.photoUris.length > 0) {

        for (let i = 0; i < photoSelectResult.photoUris.length; i++) {
          imgList.push(photoSelectResult.photoUris[i]);
        }
        //Log.info(this.TAG, 'PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + filePath);
        return imgList;
      }

    }).catch((err) = > {
      //Log.error(this.TAG, 'PhotoViewPicker.select failed with err: ' + err);
      return err;
    }).then(async (imgList) = > {
      for (let index = 0; index < imgList.length; index++) {
        const mediaBean = await this.buildMediaBean(imgList[index]);
        mediaList.push(mediaBean);
      }
      return mediaList;
    });
} catch (err) {
  //Log.error(this.TAG, 'PhotoViewPicker failed with err: ' + err);
  return Promise.reject(err);
}

}

/**

  • 选择文件
    */
    public selectFile(): Promise< MediaBean > {
    try {
    let documentSelectOptions = new picker.DocumentSelectOptions();
    let documentPicker = new picker.DocumentViewPicker();
    return documentPicker.select(documentSelectOptions)
    .then((documentSelectResult) = > {
    //Log.info(this.TAG, 'DocumentViewPicker.select successfully, DocumentSelectResult uri: ' + JSON.stringify(documentSelectResult));

     if (documentSelectResult && documentSelectResult.length > 0) {
       let filePath = documentSelectResult[0];
       //Log.info(this.TAG, 'DocumentViewPicker.select successfully, DocumentSelectResult uri: ' + filePath);
       return filePath;
     }
    

    }).catch((err) = > {
    //Log.error(this.TAG, 'PhotoViewPicker.select failed with err: ' + err);
    return err;
    }).then(async (filePath) = > {

     const mediaBean = await this.buildMediaBean(filePath);
     return mediaBean;
    

    });
    } catch (err) {
    //Log.error(this.TAG, 'PhotoViewPicker failed with err: ' + err);
    return Promise.reject(err);
    }
    }

/**

  • 拍照
    */
    public async takePhoto(context: common.UIAbilityContext): Promise< MediaBean > {
let want = {
  'uri': '',
  'action': wantConstant.Action.ACTION_IMAGE_CAPTURE,
  'parameters': {},
};
return context.startAbilityForResult(want)
  .then((result) = > {
    //Log.info(this.TAG, `startAbility call back , ${JSON.stringify(result)}`);
    if (result.resultCode === 0 && result.want && StringUtils.isNotNullOrEmpty(result.want.uri)) {
      //拍照成功
      //Log.info(this.TAG, 'takePhoto successfully, takePhotoResult uri: ' + result.want.uri);
      return result.want.uri;
    }
  }).catch((error) = > {
    //Log.info(this.TAG, `startAbility error , ${JSON.stringify(error)}`);
    return error;
  }).then(async (uri: string) = > {
    const mediaBean = await this.buildMediaBean(uri);
    return mediaBean;
  });

}

/**

  • 拍视频
    */
    public async takeVideo(context: common.UIAbilityContext): Promise< MediaBean > {
let want = {
  'uri': '',
  'action': wantConstant.Action.ACTION_VIDEO_CAPTURE,
  'parameters': {},
};
return context.startAbilityForResult(want)
  .then((result) = > {
    //Log.info(this.TAG, `startAbility call back , ${JSON.stringify(result)}`);
    if (result.resultCode === 0 && result.want && StringUtils.isNotNullOrEmpty(result.want.uri)) {
      //拍照成功
      //Log.info(this.TAG, 'takePhoto successfully, takePhotoResult uri: ' + result.want.uri);
      return result.want.uri;
    }
  }).catch((error) = > {
    //Log.info(this.TAG, `startAbility error , ${JSON.stringify(error)}`);
    return error;
  }).then(async (uri: string) = > {
    const mediaBean = await this.buildMediaBean(uri);
    return mediaBean;
  });

}

/**

  • 封装多媒体实体类
  • @param uri 文件路径
    */
    private async buildMediaBean(uri: string): Promise< MediaBean > {
if (StringUtils.isNullOrEmpty(uri)) {
  return null;
}

const mediaBean: MediaBean = new MediaBean();
mediaBean.localUrl = uri;
await this.appendFileInfoToMediaBean(mediaBean, uri);
return mediaBean;

}

/**

  • 通过Uri查找所选文件信息,插入到MediaBean中
  • @param mediaBean
  • @param uri
    */
    private async appendFileInfoToMediaBean(mediaBean: MediaBean, uri: string):Promise< MediaBean > {
if (StringUtils.isNullOrEmpty(uri)) {
  return;
}
let fileList: Array< mediaLibrary.FileAsset > = [];

const parts: string[] = uri.split('/');
const id: string = parts.length > 0 ? parts[parts.length - 1] : '-1';

try {

  let media = mediaLibrary.getMediaLibrary(this.mContext);
  let mediaFetchOptions: mediaLibrary.MediaFetchOptions = {
    selections: mediaLibrary.FileKey.ID + '= ?',
    selectionArgs: [id],
    uri: uri
  };

  let fetchFileResult = await media.getFileAssets(mediaFetchOptions);
  //Log.info(this.TAG, `fileList getFileAssetsFromType fetchFileResult.count = ${fetchFileResult.getCount()}`);
  fileList = await fetchFileResult.getAllObject();
  fetchFileResult.close();
  await media.release();

} catch (e) {
  //Log.error(this.TAG, "query: file data  exception ");
}

if (fileList && fileList.length > 0) {

  let fileInfoObj = fileList[0];
  //Log.info(this.TAG, `file id = ${JSON.stringify(fileInfoObj.id)} , uri = ${JSON.stringify(fileInfoObj.uri)}`);
  //Log.info(this.TAG, `file fileList displayName = ${fileInfoObj.displayName} ,size = ${fileInfoObj.size} ,mimeType = ${fileInfoObj.mimeType}`);

  mediaBean.fileName = fileInfoObj.displayName;
  mediaBean.fileSize = fileInfoObj.size;
  mediaBean.fileType = fileInfoObj.mimeType;
  mediaBean.pixelmap = await this.getPixelmap(fileInfoObj)
}

}

/**

  • @description 获取缩略图
  • @author Gwei
  • @time 2024/3/1 15:57
    */
    getPixelmap(fileInfoObj) {
    return new Promise(function (resolve, reject) {
    fileInfoObj.getThumbnail((err, pixelmap) = > {
    if (!err) {
    resolve(pixelmap)
    }else{
    resolve('');
    }
    })
    })
    }
    }

**4.使用方法**

async handleClick(option: MediaOption) {
let mediaBean: MediaBean;
switch (option) {
case MediaOption.TakePhoto:
mediaBean = await this.mediaHelper.takePhoto(getContext() as common.UIAbilityContext);
this.imgList.push(mediaBean)
break;
case MediaOption.TakeVideo:
mediaBean = await this.mediaHelper.takeVideo(getContext() as common.UIAbilityContext);
this.imgList.push(mediaBean)
break;
case MediaOption.Picture:
let list: Array< MediaBean > = [];
list = await this.mediaHelper.selectPicture(this.imgList.length);
for (let i = 0; i < list.length; i++) {
this.imgList.push(list[i])
}
break;
case MediaOption.File:
mediaBean = await this.mediaHelper.selectFile();
this.audioList.push(mediaBean);
break;
default:
break;
}
}


工具类已经提供给大家了,希望能帮助到大家!!!

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 鸿蒙
    +关注

    关注

    57

    文章

    2306

    浏览量

    42730
收藏 人收藏

    评论

    相关推荐

    鸿蒙实战项目开发:【短信服务】

    的道路上更进一步。 《鸿蒙 (OpenHarmony)开发学习视频》 ​ 《鸿蒙生态应用开发V2.0白皮书》 《
    发表于 03-03 21:29

    鸿蒙原生应用元服务开发-鸿蒙真机运行项目实战与注意事项

    、查看设备运行 五、点击项目结构 六、勾选红色框圈部分 登录开发者账号 七、选择好公司 八、等待运行完成 九、安装成功 可以在真机上体验项目了 本文参考引用HarmonyOS官方开发文档,基于
    发表于 05-24 15:12

    鸿蒙原生开发手记:01-元服务开发

    (\'app.color.primary_button_color\')的方式引用颜色变量,则会在深色模式时,引用 resources/dart/element/color.json 文件中,查找对应的颜色变量。对于其他资产,如图片
    发表于 11-14 17:28

    以无线蓝牙小车为载体的视频/图片

    项目名称:以无线蓝牙小车为载体的视频/图片车项目说明:(一)该“无线蓝牙小车为载体的视频/图片
    发表于 10-24 18:25

    【ELF灵翼自拍无人机测评】之APP及航测试

    的。 最后来看看我们的摄像头航效果,这里需要先点击APP中央的视频界面出,先连接好摄像头,待出现影像后,然后点击摄像机按钮并控制油门方向,随后便可以进行航,当然如果需要
    发表于 05-21 10:16

    HarmonyOS 开发视频展示(一)

    应用开发实战》撸了个呼吸训练APP,并在AI camera 上运行起来,分享下一些注意点和目前遇到的问题。4、【Raspberry Pi 2B小视频参赛】+将
    发表于 03-04 11:22

    HarmonyOS 开发视频展示(三)

    原理图,发现有个LED0是接在gpio2_3这个引脚上的,果断选择点亮这个灯。9、用鸿蒙开发AI应用(五)HDF 驱动补光灯简介:上一篇,我们在鸿蒙
    发表于 03-05 10:23

    【HarmonyOS】鸿蒙图片加载工具汇总

    ,这些示例演示了该项目中的使用。最简单的方法是使用 GifImageView5、鸿蒙图片加载工具——ionopenharmony Asynchronous Networking an
    发表于 03-25 13:51

    请问如何选择鸿蒙App开发的编程语言?

    如何选择鸿蒙App开发的编程语言
    发表于 04-13 11:15

    OpenHarmony 应用开发SDK、API 与基础工具

    一、整体说明 ArkTS 语言是鸿蒙系统主推的应用开发语言。因此鸿蒙系统提供给开发者的 API 绝大部分也是 ArkTS 语言的。
    发表于 09-19 15:45

    鸿蒙原生应用/元服务开发-AGC分发如何下载管理Profile

    Profile文件中已扩展App ID信息;后续上架流程会检测API9以上HarmonyOS应用/元服务的Profile文件是否包含App
    发表于 11-29 15:10

    微信小程序如何开发?微信小程序教程视频常用组件API开发项目实战

    本文档的主要内容介绍的是微信小程序如何开发?微信小程序教程视频微信小程序入门与实战 常用组件API开发技巧项目
    发表于 08-28 14:41 88次下载

    SDK 与API视频环境中的区别

    现在,视频API视频SDK 不一定是每个工具本身的一个类别。相反,它们是创建的API 或SDK,旨在帮助您与并非从头开始构建的
    发表于 11-25 09:34 590次阅读

    鸿蒙开发实战:【文件管理】

    ] 、[@ohos.file.fs]、[@ohos.app.ability.contextConstant] 等接口,实现了增添文件、删除文件、查找指定类型文件
    的头像 发表于 03-20 21:57 608次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b><b class='flag-5'>实战</b>:【<b class='flag-5'>文件</b>管理】

    基于ArkTS语言的OpenHarmony APP应用开发:HelloOpenharmony

    1、程序简介该程序是基于OpenHarmony标准系统编写的UI应用:HelloOpenHarmony。本案例是基于API9接口开发。本案例已在OpenHarmony凌蒙派-RK3568开发
    的头像 发表于 09-15 08:09 299次阅读
    基于ArkTS语言的OpenHarmony <b class='flag-5'>APP</b>应用<b class='flag-5'>开发</b>:HelloOpenharmony