Web获取相机拍照图片案例

介绍

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

效果预览图

使用说明

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

实现思路

1. 添加Web组件，设置onShowFileSelector和javaScriptProxy属性，接收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;
     })
     .javaScriptProxy({
       object: this.shareObject,
       name: 'shareObject',
       methodList: ['share'],
       controller: this.controller
     })
   

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);
         this.copyFileToSandBox(pickerResult.resultUri);
       }
     }
     context.startAbilityForResult(want, result);
   }
   

3. 实现拉起分享面板接口，源码参考MainPage.ets。

   shareObject: ShareClass = {
     share: async () => {
       if (!this.filePath) {
         this.getUIContext().getPromptAction().showToast({
           message: '未选择任何文件'
         });
         return;
       }
       let utdTypeId = uniformTypeDescriptor.getUniformDataTypeByFilenameExtension('.jpg',
         uniformTypeDescriptor.UniformDataType.IMAGE);
       let uri: string = fileUri.getUriFromPath(this.filePath);
       let shareData: systemShare.SharedData = new systemShare.SharedData({
         utd: utdTypeId,
         uri: uri,
         title: 'Picture Title',
         description: 'Picture Description'
       });
       let controller: systemShare.ShareController = new systemShare.ShareController(shareData);
       let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
       controller.show(context, {
         selectionMode: systemShare.SelectionMode.SINGLE,
         previewMode: systemShare.SharePreviewMode.DEFAULT
       }).then(() => {
         console.info('ShareController show success');
       }).catch((error: BusinessError) => {
         console.error(`ShareController show error, code: ${error.code}, message: ${error.message}`);
       })
     }
   };
   

4. 在HTML页面中添加input标签，并在onChange属性中添加js方法，通过dom tree返回的描述事件相关信息的event对象接收ArkTS返回的照片，并显示在img标签上。添加sharePic()方法并在button标签上调用，使html可以拉起分享面板。源码参考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';
     }
     function sharePic() {
       shareObject.share();
     }
   </script>
   <input ref="camera" type="file" id="upload" name="upload" accept="image/*" capture="upload" onchange="showPic()" />
   <button onclick="sharePic()">分享图片</button>
   <p id="image_preview">图片预览</p>
   <img id="image">
   

工程结构&模块类型

webgetcameraimage                                          // har类型
|---mainpage
|   |---MainPage.ets                                       // ArkTS页面
|---rawfile
|   |---camera.html                                        // HTML页面

模块依赖

不涉及

参考资料

Web组件

相关权限

不涉及

约束与限制

1.本示例仅支持在标准系统上运行，支持设备：Phone。

2.本示例为Stage模型，支持API13版本SDK，SDK版本号（API Version 13 Release）。

3.本示例需要使用DevEco Studio 5.0.4 Release 才可编译运行。

下载

如需单独下载本工程，执行如下命令：

git init
git config core.sparsecheckout true
echo code/BasicFeature/Web/WebGetCameraImage/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master