#鸿蒙通关秘籍#如何在HarmonyOS中使用Web组件拍照并显示图片？

HarmonyOS

Yvr低语RDBMS

2024-12-03 11:59:14

浏览

回答 1

待解决

回答 1

按赞同

按时间

ASIC红尘滚滚

在HarmonyOS中实现通过Web组件拉起相机拍照并显示图片的功能，可以按照以下步骤进行：

首先，添加Web组件，并设置 onShowFileSelector 属性来处理HTML页面中input的点击事件。在 onShowFileSelector 中调用 invokeCamera 接口，通过原生相机拍照，并使用 callback 函数回调照片的URI。然后通过 event 参数将URI封装在 FileSelectorResult 中返回给HTML页面。

Web({ src: $rawfile(LOCAL_HTML_PATH), controller: this.controller })
  .onShowFileSelector((event: FileResult) => { 
    invokeCamera(((uri: string) => {
      event?.result.handleFileList([uri]);
    }))
    return true;
  })

实现 invokeCamera 接口，通过上下文 context 来启动相机。定义 want 动作的参数，并在 result 回调中处理照片结果URI。

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) {
      console.error(`Camera error: ${error.message}`);
      return;
    }
    let resultUri = data.want?.parameters?.resourceUri;
    if (callback && resultUri) {
      callback(resultUri);
    }
  }
  context.startAbilityForResult(want, result);
}

在HTML页面，添加一个文件输入标签，用来选择图片。在 onChange 事件中，定义 showPic 函数用于处理文件，并显示图片在页面上的 img 标签中。

<script>
  function showPic() {
    let event = this.event;
    let tFile = event ? event.target.files : [];
    if (tFile.length === 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 type="file" accept="image/*" capture="environment" onchange="showPic()" />
<p id="image_preview">图片预览</p>
<img id="image" style="display:none;">