1# 相机场景案例 2 3### 介绍 4 5本示例介绍相机场景案例的使用：通过[startAbilityForResult](https://docs.openharmony.cn/pages/v5.1/zh-cn/application-dev/reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#startabilityforresult)接口拉起相机，拍照后获取照片地址，使用[Image](https://docs.openharmony.cn/pages/v5.1/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-image.md)组件展示照片。 6 7### 效果图预览 8 9<img src="entry/src/main/resources/base/media/cameraAbility.png" width="300"> 10 11**使用说明** 121. 点击输入框输入评论。 132. 点击相机图标进入拍照。 143. 点击发布按钮发布评论。 15 16### 实现思路 17 181.点击输入框，输入评论内容。 19```typescript 20TextInput() 21 ... 22 .onChange( 23 (textInComment: string) => { 24 this.commentContent = textInComment; 25 } as EditableTextOnChangeCallback) 26``` 272.点击相机图标拉起相机拍照。 28```typescript 29cameraCapture(context: common.UIAbilityContext) { 30 try { 31 let want: Want = { 32 action: Constants.ACTION_PICKER_CAMERA, 33 parameters: { 34 'supportMultiMode': false, 35 'callBundleName': context.abilityInfo.bundleName 36 } as Record<String,Object> 37 }; 38 context.startAbilityForResult(want, 39 (err: BusinessError, result: common.AbilityResult) => { 40 if (err.code) { 41 hilog.error(0x0000, 'testTag', `startAbilityForResult failed, code is ${err.code}, message is ${err.message}`); 42 return; 43 } 44 if(result.resultCode === 0) { 45 const param: Record<string, Object> | undefined = result.want?.parameters; 46 if (param !== undefined) { 47 const resourceUri: string = param[Constants.KEY_RESULT_PICKER_CAMERA] as string; 48 this.imagePath = resourceUri; 49 } 50 } 51 }); 52 53 } catch (err) { 54 let code = (err as BusinessError).code; 55 let message = (err as BusinessError).message; 56 hilog.error(0x0000, 'testTag', `startAbilityForResult failed, code is ${code}, message is ${message}`); 57 } 58} 59... 60Image($r("app.media.icon_comment_camera")) 61 ... 62 .onClick((e: ClickEvent) => { 63 try { 64 this.cameraCapture(this.getUIContext().getHostContext() as common.UIAbilityContext); 65 } catch (error: BusinessError) { 66 hilog.info(0x0000, 'testTag', 'camera capture error：-----------' + error.code); 67 } 68 }) 69``` 703.使用ForEach展示评论，使用自定义组件ImageListView展示照片。 71```typescript 72ForEach(this.commentList, (item: Comment) => { 73 Column() { 74 Row() { 75 Image(item.avatar) 76 ... 77 Column() { 78 Text(item.name) 79 Text(item.time) 80 } 81 ... 82 } 83 Text(item.comment) 84 ... 85 if (item.images.length > 0) { 86 ImageListView({ selectedImages: item.images }) 87 } 88 } 89 ... 90} 91``` 92### 高性能知识点 93 94不涉及 95 96### 工程结构&模块类型 97 98 ``` 99 cameraMainAbility 100 |---constants 101 | |---Constants.ets // 常量类 102 |---model 103 | |---CommentModel.ets // 评论数据类 104 |---components 105 | |---CommentItemView.ets // 单个评论组件 106 | |---ImageListView.ets // 评论图片List组件 107 | |---CommentInputAndCameraCapture.ets // 输入框和相机拍照组件 108 ``` 109### 参考资料 110 111[startAbilityForResult参考文档](https://docs.openharmony.cn/pages/v5.1/zh-cn/application-dev/reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#startabilityforresult) 112[Image参考文档](https://docs.openharmony.cn/pages/v5.1/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-image.md)
