小程序相机组件「camera」

组件的使用途径

使用camera组件后，只会触发摄像头，不会使用摄像头的默认样式，进入camera组件后，会全屏显示相机没有拍照按钮以及相机的各种样式。
1.将需要使用相机组件的wxml组件中输入camera标签

//属性方法看上图↑
 <camera 
 device - position="back" 
 flash="{{flash}}" 
 bindinitdone="cameraondonwn" 
 style="width:{{width}}px;
  height:{{height}}px; 
  margin-left:0px;
  z-index:1">
  </camera>

2.此时相机就会铺满全屏，没有拍照按钮。此时的camera层级是最高的，如果添加view标签和image标签是不起作用的。如果需要添加样式↓

index.wxml
<camera>
	  //文字样式
      <cover-view >
      	添加的文字
      </cover-view>
      //添加的图片、拍照按钮
      <cover-image src="../img/home.png" bindtap="takePhoto">
      </cover-image>
</camera>
index.js
page({
	//拍照
	takePhoto(){
		ctx.takePhoto({
      		quality: '1',//图片质量
     		 success: (res) => {
        		//res图片路径
        		this.setData({
					imgsrc : res.tempImagePath
				})
      		 },
        })
	}
})

下期讲解，拍照后如何使用裁剪框裁剪指定区域的图片！