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

本文链接：https://blog.youkuaiyun.com/m0_71524094/article/details/138923224

介绍

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

效果预览图

使用说明

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

实现思路

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

实现invokeCamera接口，拉起原生相机，并通过callback回调方法返回拍照结果。

invokeCamera(callback: (uri: string) => void) {
   
  const context = getContext(this) as common.UIAbilityCon