介绍

本示例介绍如何在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;
  })
...

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

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

如果大家还没有掌握鸿蒙，现在想要在最短的时间里吃透它，我这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：《鸿蒙 (Harmony OS)开发学习手册》

《鸿蒙开发学习手册》：

如何快速入门：《做鸿蒙应用开发到底学习些啥？》

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

开发基础知识：《做鸿蒙应用开发到底学习些啥？》

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

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：《HarmonyOS教学视频》

鸿蒙生态应用开发白皮书V2.0PDF：《鸿蒙生态应用开发白皮书V2.0PDF》

HarmonyOS APP开发教程步骤：《鸿蒙 (Harmony OS)开发学习手册》