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

介绍

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

效果预览图

使用说明

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

开发基础知识: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.鸿蒙南向开发方向

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/548734.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序 nodejs+vue+uninapp学生在线选课作业管理系统

基于微信小程序的班级作业管理助手使用的是MySQL数据库&#xff0c;nodejs语言和IDEA以及微信开发者工具作为开发工具&#xff0c;这些技术和工具我在日常的作业中都经常的使用&#xff0c;并且因为对编程感兴趣&#xff0c;在闲暇时间也进行的进行编程的提高&#xff0c;所以在…

智能硬件 | XR头显市场只有少数玩家,AI是扭转局面的关键?

苹果头显设备Vision Pro突出2项技术&#xff0c;即“空间计算”和手部、眼部跟踪。“空间计算”使设备能够学习并与物理环境进行交互&#xff1b;手部和眼部跟踪功能通过从设备侧面、前置和底部安装的摄像头收集手部和眼球的感应数据&#xff0c;使用户能够操作虚拟环境并与之交…

VMware workstation pro 16 虚拟机的安装

VMware workstation pro 16 虚拟机的安装 VMware 16下载VMware 16安装VMware 16许可 VMware 16下载 下载地址&#xff1a; VMware workstation pro 16 官网下载地址 VMware 16安装 安装向导&#xff0c;点击下一步勾选我同意许可协议中的条款&#xff0c;点击下一步 更改安…

20.回文链表

给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为 回文链表 。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,2,1] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;head …

前端三件套 | 综合练习:模拟抽奖活动,实现一个简单的随机抽取并显示三名获胜者

随机运行结果如下&#xff1a; 参考代码如下&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><tit…

Flink源码解析(1)TM启动

网络传输模型 首先在看之前,回顾一下akka模型: Flink通讯模型—Akka与Actor模型-CSDN博客 注:ActorRef就是actor的引用,封装好了actor 下面是jm和tm在通讯上的概念图: RpcGateway 不理解网关的作用,可以先移步看这里:网关_百度百科 (baidu.com) 用于定义RPC协议,是…

深入探索C与C++的混合编程

实现混合编程的技术细节 混合使用C和C可能由多种原因驱动。一方面&#xff0c;现有的大量优秀C语言库为特定任务提供了高效的解决方案&#xff0c;将这些库直接应用于C项目中可以节省大量的开发时间和成本。另一方面&#xff0c;C的高级特性如类、模板和异常处理等&#xff0c;…

函数-Python

师从黑马程序员 函数初体验 str1"asdf" str2"qewrew" str3"rtyuio" def my_len(data):count0for i in data:count1print(f"字符串{data}的长度是{count}")my_len(str1) my_len(str2) my_len(str3) 函数的定义 函数的调用 函数名&a…

零延迟轻量级网站指纹防御

文章信息 论文题目&#xff1a;Zero-delay Lightweight Defenses against Website Fingerprinting 期刊&#xff08;会议&#xff09;&#xff1a; 29th USENIX Security Symposium 时间&#xff1a;2020 级别&#xff1a;CCF A 文章链接&#xff1a;https://www.usenix.org/s…

【数据结构与算法】:非递归实现快速排序、归并排序

&#x1f525;个人主页&#xff1a; Quitecoder &#x1f525;专栏&#xff1a;数据结构与算法 上篇文章我们详细讲解了递归版本的快速排序&#xff0c;本篇我们来探究非递归实现快速排序和归并排序 目录 1.非递归实现快速排序1.1 提取单趟排序1.2 用栈实现的具体思路1.3 代码…

数据结构:图的拓扑排序与关键路径

目录 一、拓扑排序 1.1、算法的基本步骤 1.2、算法实现 1.4、习题思考 1.5、DFS生成逆拓扑序 一、拓扑排序 AOV网:在 有向图中&#xff0c; 顶点表示活动&#xff08;或任务&#xff09;&#xff0c; 有向边表示活动&#xff08;或任务&#xff09;间的先后关系&#xff0…

电脑msvcp140_1.dll丢失的解决方法,总结5种可靠的方法

在日常使用电脑的过程中&#xff0c;我们可能会遇到一些错误提示&#xff0c;其中之一就是“msvcp1401.dll丢失”。这个DLL文件是Microsoft Visual C Redistributable Package的一部分&#xff0c;对于许多基于Windows的应用程序来说至关重要。这个错误通常会导致某些应用程序无…