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;
    })
    ...

  2. 实现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);
    }

  3. 在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>

    图片预览

工程结构&模块类型

复制代码
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

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
gaosushexiangji3 小时前
利用sCMOS科学相机测量激光散射强度
大数据·人工智能·数码相机·计算机视觉
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js