当前位置:   article > 正文

鸿蒙APP开发实战:【Api9】拍照、拍视频;选择图片、视频、文件工具类_鸿蒙应用开发实战手机app发现功能开发

鸿蒙应用开发实战手机app发现功能开发

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

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

1710837728088.gif

2.设计思路

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

更多鸿蒙开发应用知识已更新gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md参考前往。

搜狗高速浏览器截图20240326151450.png

3.具体代码

  1. import common from '@ohos.app.ability.common';
  2. import picker from '@ohos.file.picker';
  3. import mediaLibrary from '@ohos.multimedia.mediaLibrary';
  4. import wantConstant from '@ohos.ability.wantConstant';
  5. import { MediaBean } from '../bean/MediaBean';
  6. import { StringUtils } from '../utils/StringUtils';
  7. /**
  8. * @description 多媒体辅助类
  9. * @author Gwei
  10. * @time 2024/3/1 15:57
  11. */
  12. export class MediaHelper {
  13. private readonly TAG: string = 'MediaHelper';
  14. private mContext: common.Context;
  15. constructor(context: common.Context) {
  16. this.mContext = context;
  17. }
  18. /**
  19. * 图库选择,返回最大数量为9的图片、视频集合
  20. */
  21. public selectPicture(count:number): Promise<Array<MediaBean>> {
  22. let imgList:Array<string> = [];
  23. let mediaList:Array<MediaBean> = [];
  24. try {
  25. let photoSelectOptions = new picker.PhotoSelectOptions();
  26. photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
  27. photoSelectOptions.maxSelectNumber = 9-count;
  28. let photoPicker = new picker.PhotoViewPicker();
  29. return photoPicker.select(photoSelectOptions)
  30. .then((photoSelectResult) => {
  31. //Log.info(this.TAG, 'PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(photoSelectResult));
  32. if (photoSelectResult && photoSelectResult.photoUris && photoSelectResult.photoUris.length > 0) {
  33. for (let i = 0; i < photoSelectResult.photoUris.length; i++) {
  34. imgList.push(photoSelectResult.photoUris[i]);
  35. }
  36. //Log.info(this.TAG, 'PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + filePath);
  37. return imgList;
  38. }
  39. }).catch((err) => {
  40. //Log.error(this.TAG, 'PhotoViewPicker.select failed with err: ' + err);
  41. return err;
  42. }).then(async (imgList) => {
  43. for (let index = 0; index < imgList.length; index++) {
  44. const mediaBean = await this.buildMediaBean(imgList[index]);
  45. mediaList.push(mediaBean);
  46. }
  47. return mediaList;
  48. });
  49. } catch (err) {
  50. //Log.error(this.TAG, 'PhotoViewPicker failed with err: ' + err);
  51. return Promise.reject(err);
  52. }
  53. }
  54. /**
  55. * 选择文件
  56. */
  57. public selectFile(): Promise<MediaBean> {
  58. try {
  59. let documentSelectOptions = new picker.DocumentSelectOptions();
  60. let documentPicker = new picker.DocumentViewPicker();
  61. return documentPicker.select(documentSelectOptions)
  62. .then((documentSelectResult) => {
  63. //Log.info(this.TAG, 'DocumentViewPicker.select successfully, DocumentSelectResult uri: ' + JSON.stringify(documentSelectResult));
  64. if (documentSelectResult && documentSelectResult.length > 0) {
  65. let filePath = documentSelectResult[0];
  66. //Log.info(this.TAG, 'DocumentViewPicker.select successfully, DocumentSelectResult uri: ' + filePath);
  67. return filePath;
  68. }
  69. }).catch((err) => {
  70. //Log.error(this.TAG, 'PhotoViewPicker.select failed with err: ' + err);
  71. return err;
  72. }).then(async (filePath) => {
  73. const mediaBean = await this.buildMediaBean(filePath);
  74. return mediaBean;
  75. });
  76. } catch (err) {
  77. //Log.error(this.TAG, 'PhotoViewPicker failed with err: ' + err);
  78. return Promise.reject(err);
  79. }
  80. }
  81. /**
  82. * 拍照
  83. */
  84. public async takePhoto(context: common.UIAbilityContext): Promise<MediaBean> {
  85. let want = {
  86. 'uri': '',
  87. 'action': wantConstant.Action.ACTION_IMAGE_CAPTURE,
  88. 'parameters': {},
  89. };
  90. return context.startAbilityForResult(want)
  91. .then((result) => {
  92. //Log.info(this.TAG, `startAbility call back , ${JSON.stringify(result)}`);
  93. if (result.resultCode === 0 && result.want && StringUtils.isNotNullOrEmpty(result.want.uri)) {
  94. //拍照成功
  95. //Log.info(this.TAG, 'takePhoto successfully, takePhotoResult uri: ' + result.want.uri);
  96. return result.want.uri;
  97. }
  98. }).catch((error) => {
  99. //Log.info(this.TAG, `startAbility error , ${JSON.stringify(error)}`);
  100. return error;
  101. }).then(async (uri: string) => {
  102. const mediaBean = await this.buildMediaBean(uri);
  103. return mediaBean;
  104. });
  105. }
  106. /**
  107. * 拍视频
  108. */
  109. public async takeVideo(context: common.UIAbilityContext): Promise<MediaBean> {
  110. let want = {
  111. 'uri': '',
  112. 'action': wantConstant.Action.ACTION_VIDEO_CAPTURE,
  113. 'parameters': {},
  114. };
  115. return context.startAbilityForResult(want)
  116. .then((result) => {
  117. //Log.info(this.TAG, `startAbility call back , ${JSON.stringify(result)}`);
  118. if (result.resultCode === 0 && result.want && StringUtils.isNotNullOrEmpty(result.want.uri)) {
  119. //拍照成功
  120. //Log.info(this.TAG, 'takePhoto successfully, takePhotoResult uri: ' + result.want.uri);
  121. return result.want.uri;
  122. }
  123. }).catch((error) => {
  124. //Log.info(this.TAG, `startAbility error , ${JSON.stringify(error)}`);
  125. return error;
  126. }).then(async (uri: string) => {
  127. const mediaBean = await this.buildMediaBean(uri);
  128. return mediaBean;
  129. });
  130. }
  131. /**
  132. * 封装多媒体实体类
  133. *
  134. * @param uri 文件路径
  135. */
  136. private async buildMediaBean(uri: string): Promise<MediaBean> {
  137. if (StringUtils.isNullOrEmpty(uri)) {
  138. return null;
  139. }
  140. const mediaBean: MediaBean = new MediaBean();
  141. mediaBean.localUrl = uri;
  142. await this.appendFileInfoToMediaBean(mediaBean, uri);
  143. return mediaBean;
  144. }
  145. /**
  146. * 通过Uri查找所选文件信息,插入到MediaBean中
  147. * @param mediaBean
  148. * @param uri
  149. */
  150. private async appendFileInfoToMediaBean(mediaBean: MediaBean, uri: string):Promise<MediaBean> {
  151. if (StringUtils.isNullOrEmpty(uri)) {
  152. return;
  153. }
  154. let fileList: Array<mediaLibrary.FileAsset> = [];
  155. const parts: string[] = uri.split('/');
  156. const id: string = parts.length > 0 ? parts[parts.length - 1] : '-1';
  157. try {
  158. let media = mediaLibrary.getMediaLibrary(this.mContext);
  159. let mediaFetchOptions: mediaLibrary.MediaFetchOptions = {
  160. selections: mediaLibrary.FileKey.ID + '= ?',
  161. selectionArgs: [id],
  162. uri: uri
  163. };
  164. let fetchFileResult = await media.getFileAssets(mediaFetchOptions);
  165. //Log.info(this.TAG, `fileList getFileAssetsFromType fetchFileResult.count = ${fetchFileResult.getCount()}`);
  166. fileList = await fetchFileResult.getAllObject();
  167. fetchFileResult.close();
  168. await media.release();
  169. } catch (e) {
  170. //Log.error(this.TAG, "query: file data exception ");
  171. }
  172. if (fileList && fileList.length > 0) {
  173. let fileInfoObj = fileList[0];
  174. //Log.info(this.TAG, `file id = ${JSON.stringify(fileInfoObj.id)} , uri = ${JSON.stringify(fileInfoObj.uri)}`);
  175. //Log.info(this.TAG, `file fileList displayName = ${fileInfoObj.displayName} ,size = ${fileInfoObj.size} ,mimeType = ${fileInfoObj.mimeType}`);
  176. mediaBean.fileName = fileInfoObj.displayName;
  177. mediaBean.fileSize = fileInfoObj.size;
  178. mediaBean.fileType = fileInfoObj.mimeType;
  179. mediaBean.pixelmap = await this.getPixelmap(fileInfoObj)
  180. }
  181. }
  182. /**
  183. * @description 获取缩略图
  184. * @author Gwei
  185. * @time 2024/3/1 15:57
  186. */
  187. getPixelmap(fileInfoObj) {
  188. return new Promise(function (resolve, reject) {
  189. fileInfoObj.getThumbnail((err, pixelmap) => {
  190. if (!err) {
  191. resolve(pixelmap)
  192. }else{
  193. resolve('');
  194. }
  195. })
  196. })
  197. }
  198. }

4.使用方法

  1. async handleClick(option: MediaOption) {
  2. let mediaBean: MediaBean;
  3. switch (option) {
  4. case MediaOption.TakePhoto:
  5. mediaBean = await this.mediaHelper.takePhoto(getContext() as common.UIAbilityContext);
  6. this.imgList.push(mediaBean)
  7. break;
  8. case MediaOption.TakeVideo:
  9. mediaBean = await this.mediaHelper.takeVideo(getContext() as common.UIAbilityContext);
  10. this.imgList.push(mediaBean)
  11. break;
  12. case MediaOption.Picture:
  13. let list: Array<MediaBean> = [];
  14. list = await this.mediaHelper.selectPicture(this.imgList.length);
  15. for (let i = 0; i < list.length; i++) {
  16. this.imgList.push(list[i])
  17. }
  18. break;
  19. case MediaOption.File:
  20. mediaBean = await this.mediaHelper.selectFile();
  21. this.audioList.push(mediaBean);
  22. break;
  23. default:
  24. break;
  25. }
  26. }

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

鸿蒙开发岗位需要掌握那些核心要领?

目前还有很多小伙伴不知道要学习哪些鸿蒙技术?不知道重点掌握哪些?为了避免学习时频繁踩坑,最终浪费大量时间的。

自己学习时必须要有一份实用的鸿蒙(Harmony NEXT)资料非常有必要。 这里我推荐,根据鸿蒙开发官网梳理与华为内部人员的分享总结出的开发文档。内容包含了:【ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。

废话就不多说了,接下来好好看下这份资料。

如果你是一名Android、Java、前端等等开发人员,想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习鸿蒙OpenHarmony知识←前往。下面是鸿蒙开发的学习路线图。

针对鸿蒙成长路线打造的鸿蒙学习文档。鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )开发入门教学视频,帮助大家在技术的道路上更进一步。

其中内容包含:

《鸿蒙开发基础》鸿蒙OpenHarmony知识←前往

  1. ArkTS语言
  2. 安装DevEco Studio
  3. 运用你的第一个ArkTS应用
  4. ArkUI声明式UI开发
  5. .……

《鸿蒙开发进阶》鸿蒙OpenHarmony知识←前往

  1. Stage模型入门
  2. 网络管理
  3. 数据管理
  4. 电话服务
  5. 分布式应用开发
  6. 通知与窗口管理
  7. 多媒体技术
  8. 安全技能
  9. 任务管理
  10. WebGL
  11. 国际化开发
  12. 应用测试
  13. DFX面向未来设计
  14. 鸿蒙系统移植和裁剪定制
  15. ……

《鸿蒙开发实战》鸿蒙OpenHarmony知识←前往

  1. ArkTS实践
  2. UIAbility应用
  3. 网络案例
  4. ……

最后

鸿蒙是完全具备无与伦比的机遇和潜力的;预计到年底将有 5,000 款的应用完成原生鸿蒙开发,这么多的应用需要开发,也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长,学习鸿蒙势在必行!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/424312
推荐阅读
相关标签
  

闽ICP备14008679号