微信小程序如何使用拍照?

微信小程序如何使用拍照?_第1张图片

<camera mode="normal" device-position="{{choose}}" flash="auto" binderror="error" style="width: 100%; height: 450px;overflow: hidden;">
  <cover-view class="controls">
      <cover-image class="img" src="http://imgcache.qq.com/open_proj/proj_qcloud_v2/wx/bg-face.png" style="width:100%; height:120%"/>
  cover-view>
  <cover-view class="noticeTXT">
		
		<cover-view class="num">这是提示cover-view>
	cover-view>
camera>
<button bindtap='change'>切换前后摄像头button>
<button type="primary" bindtap="takePhoto">拍照button>

<image mode="widthFix" src="{{src}}">image>

/* pages/pai/pai.wxss */
camera {
  position: relative;
}
.controls {
  position: relative;
  /* top: 5%; */
  display: flex;
}
.noticeTXT{
  font-size: 10PX;
  color: rgb(12, 242, 240);
  text-align: center;
  position: absolute;
  top: 30rpx;
  left: 50%;
  transform: translateX(-50%);
}
.controls {
  width:100%;
  height: 100%;
}
.img {
  width: 100%;
  height: 100% !important;
}
Page({
  data(){
    choose:'front'
  },
  onReady() {

  },
  takePhoto() {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  },
  error(e) {
    console.log(e)
  },
  change(){
    if(this.data.choose=='front'){
        this.setData({
            choose:'back'
        })
    } else {
      this.setData({
        choose:'front'
      })
    }
  }

})

你可能感兴趣的:(小程序)