diff --git a/code/BasicFeature/Web/WebGetCameraImage/README.md b/code/BasicFeature/Web/WebGetCameraImage/README.md
index 009a50c4bcd47c0a0f6eabed6c06bde783072e50..2226d9ee15d7d7d17bede88a6042d7fa7c3119b5 100644
--- a/code/BasicFeature/Web/WebGetCameraImage/README.md
+++ b/code/BasicFeature/Web/WebGetCameraImage/README.md
@@ -13,7 +13,7 @@
2. 完成拍照后，将图片在HTML的img标签中显示。
### 实现思路
-1. 添加Web组件，设置[onShowFileSelector](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkweb/ts-basic-components-web.md#onshowfileselector9)属性，接收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)。
+1. 添加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)。
```typescript
Web({ src: $rawfile(LOCAL_HTML_PATH), controller: this.controller })
@@ -23,9 +23,15 @@
}))
return true;
})
+ .javaScriptProxy({
+ object: this.shareObject,
+ name: 'shareObject',
+ methodList: ['share'],
+ controller: this.controller
+ })
```
-2. 实现invokeCamera接口，拉起原生相机，并通过callback回调方法返回拍照结果。源码参考[MainPage.ets](./webgetcameraimage/src/main/ets/components/mainpage/MainPage.ets)。
+2. 实现invokeCamera接口，拉起原生相机，通过callback回调方法返回拍照结果，并保存到应用沙箱中。源码参考[MainPage.ets](./webgetcameraimage/src/main/ets/components/mainpage/MainPage.ets)。
```typescript
invokeCamera(callback: (uri: string) => void) {
@@ -44,13 +50,48 @@
let resultUri: string = data.want?.parameters?.resourceUri as string;
if (callback && resultUri) {
callback(resultUri);
+ this.copyFileToSandBox(pickerResult.resultUri);
}
}
context.startAbilityForResult(want, result);
}
```
-3. 在HTML页面中添加input标签，并在onChange属性中添加js方法，通过dom tree返回的描述事件相关信息的event对象接收ArkTS返回的照片，并显示在img标签上。源码参考[camera.html](./webgetcameraimage/src/main/resources/rawfile/camera.html)。
+3. 实现拉起分享面板接口，源码参考[MainPage.ets](./webgetcameraimage/src/main/ets/components/mainpage/MainPage.ets)。
+
+ ```typescript
+ 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](./webgetcameraimage/src/main/resources/rawfile/camera.html)。
```html
+
图片预览
![]()
```
@@ -98,7 +143,7 @@
1.本示例仅支持在标准系统上运行，支持设备：Phone。
-2.本示例为Stage模型，支持API12版本SDK，SDK版本号（API Version 12 Release）。
+2.本示例为Stage模型，支持API13版本SDK，SDK版本号（API Version 13 Release）。
3.本示例需要使用DevEco Studio 5.0.4 Release 才可编译运行。
diff --git a/code/BasicFeature/Web/WebGetCameraImage/build-profile.json5 b/code/BasicFeature/Web/WebGetCameraImage/build-profile.json5
index fbde639bf61e73aab30db7b2648c9308a1419c3f..b6b62316cb07f652ffbc5c8b3178cd4c94c7f915 100644
--- a/code/BasicFeature/Web/WebGetCameraImage/build-profile.json5
+++ b/code/BasicFeature/Web/WebGetCameraImage/build-profile.json5
@@ -20,9 +20,9 @@
{
"name": "default",
"signingConfig": "default",
- "compatibleSdkVersion": 12,
- "compileSdkVersion": 12,
- "runtimeOS": "OpenHarmony",
+ "compatibleSdkVersion": '5.0.1(13)',
+ "targetSdkVersion": '5.0.1(13)',
+ "runtimeOS": "HarmonyOS",
"buildOption": {
"strictMode": {
"caseSensitiveCheck": true,
diff --git a/code/BasicFeature/Web/WebGetCameraImage/ohosTest.md b/code/BasicFeature/Web/WebGetCameraImage/ohosTest.md
index 0be3effcbc47ec05feb4372a92211509c330670c..27df3dc45b3b8b37e0aac06bb3a2cf04b96f7fd0 100644
--- a/code/BasicFeature/Web/WebGetCameraImage/ohosTest.md
+++ b/code/BasicFeature/Web/WebGetCameraImage/ohosTest.md
@@ -2,8 +2,11 @@
## 用例表
-| 测试功能 | 预置条件 | 输入 | 预期输出 | 是否自动 | 测试结果 |
-|-------------|---------------|----------------------|----------------|------|------|
-| 验证相机拉起功能 | 成功拉起应用，进入案例页面 | 1.点击选择文件按钮 | 1.成功拉起相机 | 否 | Pass |
-| 验证相机拍照功能 | 成功拉起应用，进入案例页面 | 1.点击屏幕底部拍照按钮 | 1.成功拍照 | 否 | Pass |
-| 验证Web展示照片功能 | 成功拉起应用，进入案例页面 | 1.成功后点击右侧确定按钮返回Web页面 | 1.成功在Web组件展示照片 | 否 | Pass |
\ No newline at end of file
+| 测试功能 | 预置条件 | 输入 | 预期输出 | 是否自动 | 测试结果 |
+|-------------|---------------|-----------------------|----------------------------------|------|------|
+| 验证相机拉起功能 | 成功拉起应用，进入案例页面 | 1.点击选择文件按钮 | 1.成功拉起相机 | 否 | Pass |
+| 验证相机拍照功能 | 成功拉起应用，进入案例页面 | 1.点击屏幕底部拍照按钮 | 1.成功拍照 | 否 | Pass |
+| 验证Web展示照片功能 | 成功拉起应用，进入案例页面 | 1.成功后点击右侧确定按钮返回Web页面 | 1.成功在Web组件展示照片 | 否 | Pass |
+| 验证图片分享功能 | 成功拍照，返回Web页面 | 1.拍照成功后在Web页面点击分享图片按钮 | 1.成功拉起分享面板
2.显示图片缩略图及图片名称和描述 | 否 | Pass |
+| 验证图片分享功能 | 成功拉起分享面板 | 1.选择一个应用点击 | 1.成功拉起二级分享面板
2.显示图片缩略图 | 否 | Pass |
+| 验证图片分享功能 | 成功拉起二级分享面板 | 1.点击分享图片 | 1.分享成功，弹出提示框
2.返回Web页面 | 否 | Pass |
\ No newline at end of file
diff --git a/code/BasicFeature/Web/WebGetCameraImage/webgetcameraimage/src/main/ets/components/mainpage/MainPage.ets b/code/BasicFeature/Web/WebGetCameraImage/webgetcameraimage/src/main/ets/components/mainpage/MainPage.ets
index 0af27478b0e76beac3d8a09c3548afa598752d73..a9645a3eba306a7c534244a5ef6468737ac4ab58 100644
--- a/code/BasicFeature/Web/WebGetCameraImage/webgetcameraimage/src/main/ets/components/mainpage/MainPage.ets
+++ b/code/BasicFeature/Web/WebGetCameraImage/webgetcameraimage/src/main/ets/components/mainpage/MainPage.ets
@@ -17,6 +17,10 @@ import web_webview from '@ohos.web.webview';
import { BusinessError } from '@ohos.base';
import { camera, cameraPicker } from '@kit.CameraKit';
import { logger } from '../../utils/Logger';
+import { systemShare } from '@kit.ShareKit';
+import { uniformTypeDescriptor } from '@kit.ArkData';
+import { fileUri, fileIo as fs } from '@kit.CoreFileKit';
+import { common, Context } from '@kit.AbilityKit';
/**
* 功能描述: 本示例介绍如何在HTML页面中拉起原生相机进行拍照，并获取返回的图片
@@ -47,9 +51,44 @@ class FileResult {
}
}
+interface ShareClass {
+ // 分享方法，提供给HTML页面使用
+ share: Function;
+}
+
@Component
export struct WebGetCameraImageView {
controller: web_webview.WebviewController = new web_webview.WebviewController();
+ filePath: string = '';
+ 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(() => {
+ logger.info('ShareController show success');
+ }).catch((error: BusinessError) => {
+ logger.error(`ShareController show error, code: ${error.code}, message: ${error.message}`);
+ })
+ }
+ };
build() {
// TODO：知识点：Web组件通过onShowFileSelector接口，处理具有“文件”输入类型的HTML表单，响应用户按下的“选择文件”按钮，并通过event对象，将选择的图片/文件路径返回给input标签中onchange属性调用的js方法。onShowFileSelector接口的用法详见官方文档 https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkweb/ts-basic-components-web.md#onshowfileselector9
@@ -63,6 +102,12 @@ export struct WebGetCameraImageView {
// 当返回值为true时，用户可以调用系统提供的弹窗能力。当回调返回false时，绘制的自定义弹窗无效。
return true;
})
+ .javaScriptProxy({
+ object: this.shareObject,
+ name: 'shareObject',
+ methodList: ['share'],
+ controller: this.controller
+ })
}
/**
@@ -72,6 +117,8 @@ export struct WebGetCameraImageView {
*/
async invokeCamera(callback: (uri: string) => void) {
try {
+ let pathDir = (this.getUIContext().getHostContext() as Context).filesDir;
+ this.filePath = pathDir + `/${new Date().getTime()}.jpg`;
let pickerProfile: cameraPicker.PickerProfile = {
cameraPosition: camera.CameraPosition.CAMERA_POSITION_UNSPECIFIED
};
@@ -80,10 +127,19 @@ export struct WebGetCameraImageView {
logger.info('the pick pickerResult is:' + JSON.stringify(pickerResult));
if (callback && pickerResult) {
callback(pickerResult.resultUri);
+ this.copyFileToSandBox(pickerResult.resultUri);
}
} catch (error) {
let err = error as BusinessError;
logger.error(`the pick call failed. error code: ${err.code}`);
}
}
+
+ copyFileToSandBox(uri: string) {
+ let sourceFile = fs.openSync(uri, fs.OpenMode.READ_ONLY);
+ let targetFile = fs.openSync(this.filePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
+ fs.copyFileSync(sourceFile.fd, targetFile.fd);
+ fs.close(sourceFile);
+ fs.close(targetFile);
+ }
}
\ No newline at end of file
diff --git a/code/BasicFeature/Web/WebGetCameraImage/webgetcameraimage/src/main/resources/rawfile/camera.html b/code/BasicFeature/Web/WebGetCameraImage/webgetcameraimage/src/main/resources/rawfile/camera.html
index f4cbe6c77cd4893c687b4dd9d3d4d1878817422e..8a0be1dbe0279c378d35f763b6dc134e315220fb 100644
--- a/code/BasicFeature/Web/WebGetCameraImage/webgetcameraimage/src/main/resources/rawfile/camera.html
+++ b/code/BasicFeature/Web/WebGetCameraImage/webgetcameraimage/src/main/resources/rawfile/camera.html
@@ -17,25 +17,25 @@
-
-
+
+
@@ -55,8 +55,13 @@
document.getElementById('image_preview').style.display = 'block';
document.getElementById('image').style.display = 'block';
}
+
+ function sharePic() {
+ shareObject.share();
+ }
-
+
+
图片预览
![]()