• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Web获取相机拍照图片案例
2
3### 介绍
4
5本示例介绍如何在HTML页面中拉起原生相机进行拍照，并获取返回的图片。
6
7### 效果预览图
8
9![](./entry/src/main/resources/base/media/web_get_camera_image.gif)
10
11**使用说明**
121. 点击HTML页面中的选择文件按钮，拉起原生相机进行拍照。
132. 完成拍照后，将图片在HTML的img标签中显示。
14
15### 实现思路
161. 添加Web组件，设置[onShowFileSelector](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkweb/ts-basic-components-web.md#onshowfileselector9)和[javaScriptProxy](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkweb/ts-basic-components-web.md#javascriptproxy)属性，接收HTML页面中input的点击事件。在onShowFileSelector中调用invokeCamera接口，拉起原生相机进行拍照，并通过callback回调方法获得照片的uri。然后将uri放在[FileSelectorResult](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkweb/ts-basic-components-web.md#fileselectorresult9)中，通过event参数返回给HTML页面。源码参考[MainPage.ets](./webgetcameraimage/src/main/ets/components/mainpage/MainPage.ets)。
17
18    ```typescript
19    Web({ src: $rawfile(LOCAL_HTML_PATH), controller: this.controller })
20      .onShowFileSelector((event: FileResult) => {
21        this.invokeCamera(((uri: string) => {
22          event?.result.handleFileList([uri]);
23        }))
24        return true;
25      })
26      .javaScriptProxy({
27        object: this.shareObject,
28        name: 'shareObject',
29        methodList: ['share'],
30        controller: this.controller
31      })
32    ```
33
342. 实现invokeCamera接口，拉起原生相机，通过callback回调方法返回拍照结果，并保存到应用沙箱中。源码参考[MainPage.ets](./webgetcameraimage/src/main/ets/components/mainpage/MainPage.ets)。
35
36    ```typescript
37    invokeCamera(callback: (uri: string) => void) {
38      const context = getContext(this) as common.UIAbilityContext;
39      let want: Want = {
40        action: ACTION_IMAGE_CAPTURE,
41        parameters: {
42          "callBundleName": context.abilityInfo.bundleName,
43        }
44      };
45      let result: (error: BusinessError, data: common.AbilityResult) => void = (error: BusinessError, data: common.AbilityResult) => {
46        if (error && error.code !== 0) {
47          logger.error(`${TAG_CAMERA_ERROR} ${JSON.stringify(error.message)}`);
48          return;
49        }
50        let resultUri: string = data.want?.parameters?.resourceUri as string;
51        if (callback && resultUri) {
52          callback(resultUri);
53          this.copyFileToSandBox(pickerResult.resultUri);
54        }
55      }
56      context.startAbilityForResult(want, result);
57    }
58    ```
59
603. 实现拉起分享面板接口，源码参考[MainPage.ets](./webgetcameraimage/src/main/ets/components/mainpage/MainPage.ets)。
61
62   ```typescript
63   shareObject: ShareClass = {
64     share: async () => {
65       if (!this.filePath) {
66         this.getUIContext().getPromptAction().showToast({
67           message: '未选择任何文件'
68         });
69         return;
70       }
71       let utdTypeId = uniformTypeDescriptor.getUniformDataTypeByFilenameExtension('.jpg',
72         uniformTypeDescriptor.UniformDataType.IMAGE);
73       let uri: string = fileUri.getUriFromPath(this.filePath);
74       let shareData: systemShare.SharedData = new systemShare.SharedData({
75         utd: utdTypeId,
76         uri: uri,
77         title: 'Picture Title',
78         description: 'Picture Description'
79       });
80       let controller: systemShare.ShareController = new systemShare.ShareController(shareData);
81       let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
82       controller.show(context, {
83         selectionMode: systemShare.SelectionMode.SINGLE,
84         previewMode: systemShare.SharePreviewMode.DEFAULT
85       }).then(() => {
86         console.info('ShareController show success');
87       }).catch((error: BusinessError) => {
88         console.error(`ShareController show error, code: ${error.code}, message: ${error.message}`);
89       })
90     }
91   };
92   ```
93
944. 在HTML页面中添加input标签，并在onChange属性中添加js方法，通过dom tree返回的描述事件相关信息的event对象接收ArkTS返回的照片，并显示在img标签上。添加sharePic()方法并在button标签上调用，使html可以拉起分享面板。源码参考[camera.html](./webgetcameraimage/src/main/resources/rawfile/camera.html)。
95
96    ```html
97    <script>
98      function showPic() {
99        let event = this.event;
100        let tFile = event ? event.target.files : [];
101        if (tFile === 0) {
102          document.getElementById('image_preview').style.display = 'block';
103          document.getElementById('image_preview').innerHTML = "未选择图片";
104          return
105        }
106        document.getElementById('image').setAttribute('src', URL.createObjectURL(tFile[0]));
107        document.getElementById('image_preview').style.display = 'block';
108        document.getElementById('image').style.display = 'block';
109      }
110      function sharePic() {
111        shareObject.share();
112      }
113    </script>
114    <input ref="camera" type="file" id="upload" name="upload" accept="image/*" capture="upload" onchange="showPic()" />
115    <button onclick="sharePic()">分享图片</button>
116    <p id="image_preview">图片预览</p>
117    <img id="image">
118    ```
119
120### 工程结构&模块类型
121
122   ```
123   webgetcameraimage                                          // har类型
124   |---mainpage
125   |   |---MainPage.ets                                       // ArkTS页面
126   |---rawfile
127   |   |---camera.html                                        // HTML页面
128   ```
129
130### 模块依赖
131
132不涉及
133
134### 参考资料
135
136[Web组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkweb/ts-basic-components-web.md)
137
138### 相关权限
139
140不涉及
141
142### 约束与限制
143
1441.本示例仅支持在标准系统上运行，支持设备：Phone。
145
1462.本示例为Stage模型，支持API13版本SDK，SDK版本号（API Version 13 Release）。
147
1483.本示例需要使用DevEco Studio 5.0.4 Release 才可编译运行。
149
150### 下载
151
152如需单独下载本工程，执行如下命令：
153```
154git init
155git config core.sparsecheckout true
156echo code/BasicFeature/Web/WebGetCameraImage/ > .git/info/sparse-checkout
157git remote add origin https://gitee.com/openharmony/applications_app_samples.git
158git pull origin master
159```
160