纯血鸿蒙APP实战开发——Web获取相机拍照图片案例

介绍

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

效果预览图

使用说明

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

实现思路

  1. 添加Web组件,设置onShowFileSelector属性,接收HTML页面中input的点击事件。在onShowFileSelector中调用invokeCamera接口,拉起原生相机进行拍照,并通过callback回调方法获得照片的uri。然后将uri放在FileSelectorResult中,通过event参数返回给HTML页面。
...
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回调方法返回拍照结果。
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标签上。
<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组件

也为了积极培养鸿蒙生态人才,让大家都能学习到鸿蒙开发最新的技术,针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群,整理了一套纯血版鸿蒙(HarmonyOS Next)全栈开发技术的学习路线【包含了大厂APP实战项目开发】

本路线共分为四个阶段:

第一阶段:鸿蒙初中级开发必备技能

在这里插入图片描述

第二阶段:鸿蒙南北双向高工技能基础:gitee.com/MNxiaona/733GH

第三阶段:应用开发中高级就业技术

第四阶段:全网首发-工业级南向设备开发就业技术:gitee.com/MNxiaona/733GH

《鸿蒙 (Harmony OS)开发学习手册》(共计892页)

如何快速入门?

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

开发基础知识:gitee.com/MNxiaona/733GH

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

基于ArkTS 开发

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

鸿蒙开发面试真题(含参考答案):gitee.com/MNxiaona/733GH

鸿蒙入门教学视频:

美团APP实战开发教学:gitee.com/MNxiaona/733GH

写在最后

  • 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
  • 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
  • 想要获取更多完整鸿蒙最新学习资源,请移步前往小编:gitee.com/MNxiaona/733GH

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

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

相关文章

【SpringBoot】SpringBoot整合jasypt进行重要数据加密

&#x1f4dd;个人主页&#xff1a;哈__ 期待您的关注 目录 &#x1f4d5;jasypt简介 &#x1f525;SpringBoot使用jasypt &#x1f4c2;创建我需要的数据库文件 &#x1f4d5;引入依赖 &#x1f513;配置数据库文件&#xff08;先不进行加密&#xff09; &#x1f319;创…

Anaconda安装-超详细版(2024)

扫盲&#xff1a;先装Python还是先装anaconda? 安装anaconda即可&#xff0c;不需要单独装python anaconda 是一个python的发行版&#xff0c;包括了python和很多常见的软件库, 和一个包管理器conda。 一、下载Anaconda 安装包&#xff08;官网和国内镜像资源&#xff09; …

【深度学习】SDXL中的Offset Noise,Diffusion with Offset Noise,带偏移噪声的扩散

https://www.crosslabs.org//blog/diffusion-with-offset-noise 带有偏移噪声的扩散 针对修改后的噪声进行微调&#xff0c;使得稳定扩散能够轻松生成非常暗或非常亮的图像。 作者&#xff1a;尼古拉斯古藤伯格 | 2023年1月30日 马里奥兄弟使用稳定扩散挖掘隧道。左图显示了未…

Springboot+Vue项目-基于Java+MySQL的高校专业实习管理系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…

Linux文件:重定向底层实现原理(输入重定向、输出重定向、追加重定向)

Linux文件&#xff1a;重定向底层实现原理&#xff08;输入重定向、输出重定向、追加重定向&#xff09; 前言一、文件描述符fd的分配规则二、输出重定向&#xff08;>&#xff09;三、输出重定向底层实现原理四、追加重定向&#xff08;>>&#xff09;五、输入重定向…

关于 vs2019 c++20 规范里的 STL 库里模板 decay_t<T>

&#xff08;1&#xff09; 这个模板&#xff0c;在库代码里非常常见。 decay 英文是“衰弱&#xff0c;消减” 的意思&#xff0c;大概能感觉到就是要简化模板参数 T 的类型&#xff0c;去掉其上的修饰符。因为常用且复杂&#xff0c;故单独列出其源码和注释。先举例其应用场景…

LINQ(五) ——使用LINQ进行匿名对象初始化

总目录 C# 语法总目录 上一篇&#xff1a;LINQ(四) ——使用LINQ进行对象类型初始化 LINQ 五 ——使用LINQ进行匿名对象初始化 6.2 匿名类型 6.2 匿名类型 可以不用声明定义一个对象&#xff0c;直接使用new&#xff0c;然后直接赋值即可 string[] names { "Tom",…

动态顺序表实现

目录 1. 顺序表的概念 2. 实现的功能 3. 顺序表的定义 4.顺序表的实现 4.1 seqlist.c 4.2 seqlist.h 4.3 test.c 5. 顺序表的优缺点 5.1优点 5.2缺点 1. 顺序表的概念 用一段物理地址连续的内存依次存储数据元素的线性结构 本质就是数组&#xff0c;在数组基础上要求…

从零手写实现 tomcat-11-filter 过滤器

创作缘由 平时使用 tomcat 等 web 服务器不可谓不多&#xff0c;但是一直一知半解。 于是想着自己实现一个简单版本&#xff0c;学习一下 tomcat 的精髓。 系列教程 从零手写实现 apache Tomcat-01-入门介绍 从零手写实现 apache Tomcat-02-web.xml 入门详细介绍 从零手写…

基于Springboot的学生心理压力咨询评判(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的学生心理压力咨询评判&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系…

Yalmip使用教程(8)-常见报错及调试方法

博客中所有内容均来源于自己学习过程中积累的经验以及对yalmip官方文档的翻译&#xff1a;https://yalmip.github.io/tutorials/ 这篇博客将详细介绍使用yalmip工具箱编程过程中的常见错误和相应的解决办法。 1.optimize的输出参数 众所周知&#xff0c;optimize是yalmip用来求…

5.7日学习记录及相关问题解答

1. 阅读文章 复习 JAVA基础——接口&#xff08;全网最详细教程&#xff09; Java之对象的多态性&#xff08;使用生活中通俗的例子讲解&#xff09; 新学 JavaWeb——Servlet&#xff08;全网最详细教程包括Servlet源码分析&#xff09; 有用 创建Dynamic Web Project工程&…

PS滤镜插件Camera Raw 15.4升级,开启智能修图

前段时间Adobe 更新了photoshop 的智能AI填充功能&#xff0c;深受很多设计师朋友的喜爱。Camera Raw作为PS的一个滤镜插件对RAW图片的处理上面有一定的优势&#xff0c;Camera Raw 15.4升级了&#xff0c;开启智能修图木事&#xff0c;一起来看看吧&#xff01; Camera Raw滤镜…

【2024华为HCIP831 | 高级网络工程师之路】刷题日记(18)

个人名片&#xff1a;&#x1faaa; &#x1f43c;作者简介&#xff1a;一名大三在校生&#xff0c;喜欢AI编程&#x1f38b; &#x1f43b;‍❄️个人主页&#x1f947;&#xff1a;落798. &#x1f43c;个人WeChat&#xff1a;hmmwx53 &#x1f54a;️系列专栏&#xff1a;&a…

ClassificationPrimitive 内部原理

ClassificationPrimitive 内部原理 发明 ClassificationPrimitive的真是个天才。其原理是利用 webgl 的模板缓冲区实现。 渲染两次, 首先是绘制模板, 然后绘制真正的内容。 示意图: function createClass() {const { program, uniforms } WebGLProgram.buildPrograms(gl, …

代码随想录算法训练营第36期DAY22

DAY22 654最大二叉树 自己做的时候忽略了&#xff1a;nums.length>1的题给条件。所以每次递归都要判断是否size()>1&#xff0c;不要空的。 /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * TreeNode *rig…

牛客网刷题 | BC84 牛牛学数列2

目前主要分为三个专栏&#xff0c;后续还会添加&#xff1a; 专栏如下&#xff1a; C语言刷题解析 C语言系列文章 我的成长经历 感谢阅读&#xff01; 初来乍到&#xff0c;如有错误请指出&#xff0c;感谢&#xff01; 描述 这次牛牛又换了个数…

sql中的exists和in的区别

在SQL中&#xff0c;EXISTS 和 IN 都用于子查询&#xff0c;但它们的用法和目的有所不同。 ### EXISTS EXISTS 是一个逻辑运算符&#xff0c;用于检查子查询是否返回任何行。如果子查询返回至少一行&#xff0c;那么 EXISTS 子句的结果为 TRUE&#xff1b;否则&#xff0c;结果…

一个用Kotlin编写简易的串行任务调度器

引言 由于项目中有处理大量后台任务并且串行执行的需求&#xff0c;特意写了一个简易的任务调度器&#xff0c;方便监控每个任务执行和异常情况&#xff0c;任务之间互不影响。正如上所述&#xff0c;Kotlin中的TaskScheduler类提供了一个强大的解决方案&#xff0c;用于使用S…

「AIGC」Python实现tokens算法

本文主要介绍通过python实现tokens统计,避免重复调用openai等官方api,开源节流。 一、设计思路 初始化tokenizer使用tokenizer将文本转换为tokens计算token的数量二、业务场景 2.1 首次加载依赖 2.2 执行业务逻辑 三、核心代码 from transformers import AutoTokenizer imp…