HarmonyOS NEXT应用开发之Web获取相机拍照图片案例

这篇具有很好参考价值的文章主要介绍了HarmonyOS NEXT应用开发之Web获取相机拍照图片案例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

介绍

本示例介绍如何在HTML页面中拉起原生相机进行拍照,并获取返回的图片。

效果预览图

HarmonyOS NEXT应用开发之Web获取相机拍照图片案例,Harmony OS,鸿蒙,移动开发,数码相机,harmonyos,前端,移动开发,鸿蒙开发,华为

使用说明

  1. 点击HTML页面中的选择文件按钮,拉起原生相机进行拍照。
  2. 完成拍照后,将图片在HTML的img标签中显示。

实现思路

  1. 添加Web组件,设置onShowFileSelector属性,接收HTML页面中input的点击事件。在onShowFileSelector中调用invokeCamera接口,拉起原生相机进行拍照,并通过callback回调方法获得照片的uri。然后将uri放在FileSelectorResult中,通过event参数返回给HTML页面。源码参考MainPage.ets。
...
Web({ src: $rawfile(LOCAL_HTML_PATH), controller: this.controller })
  .onShowFileSelector((event: FileResult) => { 
    this.invokeCamera(((uri: string) => {
      event?.result.handleFileList([uri]);
    }))
    return true;
  })
...
  1. 实现invokeCamera接口,拉起原生相机,并通过callback回调方法返回拍照结果。源码参考MainPage.ets。
invokeCamera(callback: (uri: string) => void) {
  const context = getContext(this) as common.UIAbilityContext;
  let want: Want = {
    action: ACTION_IMAGE_CAPTURE,
    parameters: {
      "callBundleName": context.abilityInfo.bundleName,
    }
  };
  let result: (error: BusinessError, data: common.AbilityResult) => void = (error: BusinessError, data: common.AbilityResult) => {
    if (error && error.code !== 0) {
      logger.error(`${TAG_CAMERA_ERROR} ${JSON.stringify(error.message)}`);
      return;
    }
    let resultUri: string = data.want?.parameters?.resourceUri as string;
    if (callback && resultUri) {
      callback(resultUri);
    }
  }
  context.startAbilityForResult(want, result);
}
  1. 在HTML页面中添加input标签,并在onChange属性中添加js方法,通过dom tree返回的描述事件相关信息的event对象接收ArkTS返回的照片,并显示在img标签上。源码参考camera.html。
<script>
  function showPic() {
    let event = this.event;
    let tFile = event ? event.target.files : [];
    if (tFile === 0) {
      document.getElementById('image_preview').style.display = 'block';
      document.getElementById('image_preview').innerHTML = "未选择图片";
      return
    }
    document.getElementById('image').setAttribute('src', URL.createObjectURL(tFile[0]));
    document.getElementById('image_preview').style.display = 'block';
    document.getElementById('image').style.display = 'block';
  }
</script>
<input ref="camera" type="file" id="upload" name="upload" accept="image/*" capture="upload" onchange="showPic()" />
<p id="image_preview">图片预览</p>
<img id="image">

工程结构&模块类型

webgetcameraimage                                           // har类型
|---mainpage
|   |---MainPage.ets                                       // ArkTS页面
|---rawfile
|   |---camera.html                                        // HTML页面

模块依赖

utils

routermodule

参考资料

Web组件

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

《鸿蒙开发学习手册》:

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

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

HarmonyOS NEXT应用开发之Web获取相机拍照图片案例,Harmony OS,鸿蒙,移动开发,数码相机,harmonyos,前端,移动开发,鸿蒙开发,华为

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

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

HarmonyOS NEXT应用开发之Web获取相机拍照图片案例,Harmony OS,鸿蒙,移动开发,数码相机,harmonyos,前端,移动开发,鸿蒙开发,华为

基于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. ……

HarmonyOS NEXT应用开发之Web获取相机拍照图片案例,Harmony OS,鸿蒙,移动开发,数码相机,harmonyos,前端,移动开发,鸿蒙开发,华为

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

HarmonyOS NEXT应用开发之Web获取相机拍照图片案例,Harmony OS,鸿蒙,移动开发,数码相机,harmonyos,前端,移动开发,鸿蒙开发,华为

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

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

HarmonyOS NEXT应用开发之Web获取相机拍照图片案例,Harmony OS,鸿蒙,移动开发,数码相机,harmonyos,前端,移动开发,鸿蒙开发,华为文章来源地址https://www.toymoban.com/news/detail-842543.html

腾讯T10级高工技术,安卓全套VIP课程全网免费送:https://qr21.cn/D2k9D5

到了这里,关于HarmonyOS NEXT应用开发之Web获取相机拍照图片案例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【HarmonyOS开发】HarmonyOS-应用开发入门

    1. 【判断题】 10/10 在Windows系统下载安装DevEco Studio工具时,安装路径可以包含中文名。 错误(False)   2. 【判断题】 10/10 某开发者在使用远程真机运行应用时,不需要对应用进行签名;但使用本地真机运行应用时,必须需要对应用进行签名。 错误(False)   3. 【判断题】 10/10 在

    2024年02月04日
    浏览(44)
  • 【HarmonyOS应用开发】云开发(十九)

    HarmonyOS 云开发是 DevEco Studio 新推出的功能,可以让您在一个项目工程中,使用一种语言完成端侧和云侧功能的开发。 基于 AppGallery Connect Serverless 构建的云侧能力,让您无需构建和管理云端资源,随需使用,大大提高构建应用/元服务的效率。 认证服务: 可以为应用快速构建

    2024年02月21日
    浏览(39)
  • HarmonyOS 应用开发入门

    DevEco Studio Release版本为:DevEco Studio 3.1.1。 Compile SDK Release版本为:3.1.0(API 9)。 构建方式为 HVigor,而非 Gradle。 最新版本已不再支持 (”Java、JavaScript” 、“类Web开发范式” 和 “FA 模型” )用于应用开发,因此大部分举例都以 (“ArkTS声明式范式” 和 “Stage 模型”)最

    2024年01月19日
    浏览(46)
  • 鸿蒙(HarmonyOS)应用开发指南

    1.1 简介 鸿蒙 (即 HarmonyOS ,开发代号 Ark ,正式名称为华为终端鸿蒙智能设备操作系统软件)是华为公司自 2012 年以来开发的一款可支持鸿蒙原生应用和兼容 AOSP 应用的 分布式操作系统 。该系统利用“分布式”技术将 手机、电脑、平板、电视、汽车和智能穿戴 等多款设备

    2024年02月02日
    浏览(104)
  • 【HarmonyOS】HarmonyOS应用开发者高级认证题库

    注:HarmonyOS应用开发者高级认证考试50道题,答对40及格,此题库有部分不清楚的选项,欢迎补充 1、HarmonyOS应用可以兼容OpenHarmony生态 正确(True) 2、云函数打包完成后,需要到AppGallery Connect创建对应函数的触发器才可以在端侧中调用 错误(False) 3、Ability是系统调度应用的最小单

    2024年02月03日
    浏览(67)
  • 鸿蒙应用开发尝鲜:初识HarmonyOS

    来源:华为官方网站 : https://developer.huawei.com/ 相信大家对鸿蒙应用开发也不在陌生,很多身处互联网行业或者不了解的人们现在也一定都听说过华为鸿蒙.这里我将不再说废话,直接步入正题 HarmonyOS应用开发采用的是ArkTS语言,ArkTS是在TypeScript(简称TS)基础上的拓展,而TS又是JavaScrip

    2024年02月02日
    浏览(65)
  • 鸿蒙HarmonyOS应用开发初体验

    最近华为发布mt60新机火了,作为一名移动开发程序员,对鸿蒙系统开发移动端就很感兴趣了。 开发工具:HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者 下载完后按默认安装就可以了,界面跟AS很类似,之前我jdk环境配置就不在配置了,不懂的可以百度下很多教程。 这是基

    2024年02月09日
    浏览(54)
  • HarmonyOS应用开发-低代码开发登录页面(超详细)

    本篇文章我来手把手教大家做一个HarmonyOS 应用的登录页面,逐步讲解,非常细致,百分百能学会,并提供全部源码。页面使用 DevEco Studio 的低代码开发。 通过本文的实践经验,我想告诉大家, HarmonyOS 应用开发其实并不难,只要了解具体的开发流程和开发思想,大家都可以很

    2024年02月03日
    浏览(49)
  • 【鸿蒙开发】HarmonyOS应用开发者基础认证题库

    华为开发者学堂   1、考试需实名认证,请在考前于个人主页→个人信息→基本信息→进行实名认证,否则考试通过无法获取专业证书; 2、每个帐号每月有3次考试机会,次月重置考试次数。做题过程中请认真对待,避免考试次数浪费; 3、考试时长为1小时,请合理分配做题

    2024年03月09日
    浏览(114)
  • UI开发布局-HarmonyOS应用UI开发布局

    UI页面的构建不用再像Android开发过程中在.xml文件中书写,可直接在页面上使用声明式UI的方式按照布局进行排列,构建应用的页面。 如下代码使用Row、Column构建一个页面布局,在页面布局中添加组件Text、Button,共同构成页面: 在实际开发的过程中,按照如下流程进行页面的

    2024年04月13日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包