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.mzph.cn/news/754709.shtml

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

相关文章

VTK----VTK的事件机制

事件的发送和接收对于一个应用或系统来说是一个基本的功能,所以一些通用的库对应地也建立了自己的一套管理事件的机制,例如QT、VTK都有自己的事件管理机制。VTK库中定义了很多的事件,这些事件是如何进行管理的,下面从三个方面来详细的说明。 1 事件的管理 在讲述VTK的事件…

ASP .Net Core 8.0 依赖注入的三种注入模式

&#x1f433;前言 &#x1f340;在.NET中&#xff0c;依赖注入&#xff08;Dependency Injection&#xff0c;简称DI&#xff09;是一种设计模式&#xff0c;用于解耦组件之间的依赖关系。 依赖注入的核心思想是将对象的依赖关系&#xff08;即对象所需的其他服务或组件&#…

蓝桥杯物联网竞赛_STM32L071_12_按键中断与串口中断

按键中断&#xff1a; 将按键配置成GPIO_EXTI中断即外部中断 模式有三种上升沿&#xff0c;下降沿&#xff0c;上升沿和下降沿都会中断 external -> 外部的 interrupt -> 打断 trigger -> 触发 detection -> 探测 NVIC中将中断线ENABLE 找接口函数 在接口函数中写…

Apache Dolphinscheduler - 无需重启 Master-Server 停止疯狂刷日志解决方案

记录的是一个 3.0 比较难搞的问题&#xff0c;相信不少使用过 3.0 的用户都遇到过 Master 服务中存在一些工作流或者任务流一直不停的死循环的问题&#xff0c;导致疯狂刷日志。不过本人到现在也没找到最关键的触发原因&#xff0c;只是看到一些连锁反应带来的结果…… 影响因素…

统计-R(相关系数)与R^2(决定系数)

1.相关系数&#xff08;R&#xff09; 定义&#xff1a;考察两个事物&#xff08;在数据里我们称之为变量&#xff09;之间的相关程度。 假设有两个变量X&#xff0c;Y&#xff0c;那么两个变量间的皮尔逊相关系数可通过以下公式计算&#xff1a; 公式一&#xff1a; 其中…

CCF-CSP认证考试 202305-1 重复局面 100分题解

更多 CSP 认证考试题目题解可以前往&#xff1a;CSP-CCF 认证考试真题题解 原题链接&#xff1a; 202305-1 重复局面 时间限制&#xff1a; 1.0s 内存限制&#xff1a; 512.0MB 题目背景 国际象棋在对局时&#xff0c;同一局面连续或间断出现3次或3次以上&#xff0c;可由任…

缓存雪崩、缓存穿透、缓存预热、缓存更新、缓存降级等问题

一、缓存雪崩 简单理解&#xff1a;由于原有缓存失效&#xff0c;新缓存未到期间 (例如&#xff1a;设置缓存时采用了相同的过期时间&#xff0c;在同一时刻出现大面积的缓存过期)&#xff0c;所有原本应该访问缓存的请求都去查询数据库了&#xff0c;而对数据库CPU和内存造成…

File文件对象

在计算机系统中&#xff0c;文件是非常重要的存储方式。Files&#xff08;java.nio.file.Files&#xff09;提供了多种方法来处理文件系统中的文件。比直接使用File文件要方便。 Files工具类:读取指定文件中的所有文本 package study1;import java.io.IOException; import ja…

trpc-go 博客系统

trpc-go 博客系统 使用go语言构建的全栈项目&#xff0c;充分利用了go的简洁性、高性能和并发处理能力。 系统采用了trpc-go框架和北极星进行分布式开发&#xff0c;展示了如何基于腾讯开源技术栈构建微服务架构&#xff0c;实现高效的服务通信和管理。 https://github.com/…

项目管理系统私有化部署解决方案!找企智汇软件!

企智汇项目管理软系统是一款支持私有化部署的项目管理系统&#xff0c;适合大型、中型、小型企业的不同需求。企智汇软件是一个专业的项目全周期管理平台&#xff0c;拥有10年的项目管理经验&#xff0c;以项目为中心&#xff0c;通过计划控制进度&#xff0c;预算控制成本&…

HTML5语义化元素

在HTML5之前&#xff0c;网站的分布层级有哪些呢&#xff1f; nav&#xff0c;header&#xff0c;main&#xff0c;footer 这样做有一个弊端 我们往往过多的使用div&#xff0c;通过ID或class来区分元素 对于浏览器来说这些元素不够语义化 对于我来说搜索引擎来说&#xff0c;不…

云原生部署手册01:构建k8s集群并配置持久化存储

写在前面&#xff1a;k8s弃用docker的影响其实没那么大 k8s通过dockershim对docker的支持从1.20版本后就已经移除&#xff0c;仅支持符合Container Runtime Interface(CRI)的容器运行环境&#xff0c;比如containerd。containerd本身就是docker底层的容器运行环境&#xff0c;…

海康威视相机SDK二次开发(JAVA语言)

目录 前言客户端创建虚拟相机示例代码保存图片程序运行结果修改需求 二次开发引入外部包对SaveImage.java文件进行修改保存图片saveDataToFile方法选择相机chooseCamera方法主方法 FileUtil类处理过期照片启动类与配置文件application.yml通过实体类读取yml启动类 SaveImage.ja…

供应链投毒预警 | 开源供应链投毒202402月报发布啦

概述 悬镜供应链安全情报中心通过持续监测全网主流开源软件仓库&#xff0c;结合程序动静态分析方式对潜在风险的开源组件包进行动态跟踪和捕获&#xff0c;发现大量的开源组件恶意包投毒攻击事件。在2024年2月份&#xff0c;悬镜供应链安全情报中心在NPM官方仓库&#xff08;…

Linux uucico命令教程:UUCP文件传输服务程序(附实例详解和注意事项)

Linux uucico命令介绍 uucico&#xff0c;全称UUCP文件传输服务程序&#xff0c;是用来处理uucp或uux送到队列的文件传输工具。uucico有两种工作模式&#xff1a;主动模式和附属模式。当在主动模式下时&#xff0c;uucico会调用远端主机&#xff1b;在附属模式下时&#xff0c…

快速搭建一个一元二次方程flask应用

新建flask_service目录、templates子目录 flask_service —— app.py —— templates —— —— index.html app.py from flask import Flask, request, jsonify, render_template import random import matplotlib.pyplot as plt from io import BytesIO import base64app F…

分布式 Session--一起学习吧之架构

一、定义 分布式Session是指在一个分布式系统中&#xff0c;多个服务器之间共享用户的会话信息。在Web应用中&#xff0c;Session通常用于跟踪用户的状态和会话数据。然而&#xff0c;在分布式系统中&#xff0c;由于用户请求可能被分发到不同的服务器上&#xff0c;因此需要一…

jenkins Pipeline接入mysql

背景&#xff1a; jenkin pipeline进化过程如下&#xff1a; Jenkins Pipeline 脚本优化实践&#xff1a;从繁琐到简洁 >>>>> Jenkins Pipeline脚本优化&#xff1a;为Kubernetes应用部署增加状态检测>>>>>> 使用Jenkins和单个模板部署多个K…

BootScrap详细教程

文章目录 前言一、BootScrap入门二、导航三、栅格系统四、container五、面板六、媒体对象七、分页八、图标九、实现动态效果 前言 BootScrap是别人帮我们写好的CSS样式。如果想要使用BootScrap&#xff0c;需要先下载下来&#xff0c;在页面上引入&#xff0c;编写HTML需要按照…

Ubuntu 23.10 tar包安装和配置Elasticsearch kibana 7.13.3

目录 一、环境说明 二、准备工作 三、安装elasticsearch 3.1 安装elasticsearch 3.2 添加服务和设置开机启动 四、安装kibana 4.1. 安装kibana 4.2 添加服务和设置开机启动 出于工作需要&#xff0c;需要在Ubuntu 23.10系统上通过tar包方式安…