README.md
1# Web获取相机拍照图片案例
2
3### 介绍
4
5本示例介绍如何在HTML页面中拉起原生相机进行拍照，并获取返回的图片。
6
7### 效果预览图
8
9
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
