鸿蒙开发 拍照功能

鸿蒙拍照（js）

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

一，实现思路

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

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

二，代码解析

1，hml文件

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

<div class="container">    
<camera id="camera" flash="on" deviceposition="back" onerror="cameraError"></camera>    
<button class="button" value="拍照" onclick="takePhoto"></button>    
<text class="content">{{srcUrl}}</text>    
<image class="image" src="{{imageSrc}}"></image>
</div>

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"
  }
]