鸿蒙拍照（js）

使用camera组件，实现拍照，拍照成功 获取照片路径，显示照片，通过router实现传参数跳转。

一，实现思路

添加一个camera组件用于摄像拍照的操作，添加一个按钮组件，给按钮组件添加一个 onclick事件，事件中调用 拍照的 takePhoto 方法 实现拍照  ，通过拍照成功的回调 获取图片路径，添加一个image组件 和 text组件 ，用来展示图片和图片路径。

拍照成功后还能 做页面跳转，并且参数带上图片路径，这样可以实现跳转到另一个页面显示图片
 

二，代码解析

1，hml文件

hml文件中添加 四个组件  camera，button，text，image 用来实现拍照后展示图片和路径信息。

            {{srcUrl}}    

2，css文件

css文件用来实现拍照界面的显示样式，camera 实现拍照摄像界面的样式 ，button实现拍照按钮的样式，content实现路径显示的文本样式。

.container {    flex-direction: column;    justify-content: flex-start;    align-items: center;} .camera{    width: 100%;    height: 400px;}.button{    width: 150px;    height: 45px;    font-size: 15px;    margin: 20px;}.content{    font-size: 15px;    color: chocolate;    font-weight: bold;    margin: 10px;}

3，js文件

import prompt from '@system.prompt';import router from '@system.router';export default {    data: {   title: '',   imageSrc:"common/images/bg-tv.jpg",   srcUrl:"拍照图片路径"    },    cameraError(){   prompt.showToast({  message: "授权摄像头失败！"   });    },    takePhoto(e){   var camera_take = this;   var camera = this.$element('camera');  camera.takePhoto({  quality:'high',  success(result){      camera_take.src = result.uri      console.log("拍照成功路径==>>"+camera_take.src);      this.imageSrc = camera_take.src;      this.srcUrl = camera_take.src;      this.routerPage(this.srcUrl);},     fail(result){   console.info('-------------拍照失败回调------'+result)     },     complete(result){   console.info('-------------拍照结束回调------'+result)     } })    },    routerPage(imageUrl){   router.push({  uri: "pages/index/index",  params:{      src: imageUrl  }   })    }}

4，权限

"reqPermissions": [  {    "name": "ohos.permission.CAMERA"  }]