介紹

本示例介紹如何在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

參考資料

Web組件

也為了積極培養鴻蒙生態人才，讓大家都能學習到鴻蒙開發最新的技術，針對一些在職人員、0基礎小白、應屆生/計算機專業、鴻蒙愛好者等人群，整理了一套純血版鴻蒙（HarmonyOS Next）全棧開發技術的學習路線【包含了大廠APP實戰項目開發】。

本路線共分為四個階段：

第一階段：鴻蒙初中級開發必備技能

第二階段：鴻蒙南北雙向高工技能基礎：gitee.com/MNxiaona/733GH

第三階段：應用開發中高級就業技術

第四階段：全網首發-工業級南向設備開發就業技術：gitee.com/MNxiaona/733GH

《鴻蒙 (Harmony OS)開發學習手冊》（共計892頁）

如何快速入門？

1.基本概念
2.構建第一個ArkTS應用
3.……

開發基礎知識:gitee.com/MNxiaona/733GH

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

鴻蒙開發面試真題（含參考答案）:gitee.com/MNxiaona/733GH

鴻蒙入門教學視頻：

美團APP實戰開發教學：gitee.com/MNxiaona/733GH

寫在最后

• 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
• 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
• 關注小編，同時可以期待后續文章ing🚀，不定期分享原創知識。
• 想要獲取更多完整鴻蒙最新學習資源，請移步前往小編：gitee.com/MNxiaona/733GH