微信小程序调用摄像头实现拍照功能

WXML文件代码

<view class="content">
  <view class="camera-con">
    <camera wx:if="{{cameraStatus}}" device-position="back" flash="off" binderror="error"></camera>
    <van-image wx:if="{{!cameraStatus}}" width="100%" height="auto" src="{{src}}" fit="fill" />
  </view>
  <view class="btn-con">
    <van-button round color="#999999" size="small" bindtap="rePhoto">重新拍照</van-button>
    <van-button class="take" icon="stop-circle-o" color="rgba(0,0,0,0)" bindtap="takePhoto"></van-button>
    <van-button round color="#999999" size="small" bindtap="sendPhoto">提交图片</van-button>
  </view>
</view>

JS文件代码

Page({
  data: {
    cameraStatus: false,
    src: '',
  },
  onLoad() {
    const _this = this
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.camera']) {
          _this.setData({
            cameraStatus: true
          })
        } else {
          // 用户还没有授权，向用户发起授权请求
          wx.authorize({
            scope: 'scope.camera',
            success() { // 用户同意授权
              _this.setData({
                cameraStatus: true
              })
            },
            fail() { // 用户不同意授权
              _this.openSetting().then(res => {
                _this.setData({
                  cameraStatus: true
                })
              })
            }
          })
        }
      },
      fail: res => {
        console.log('获取用户授权信息失败')
      }
    })
  },

  // 打开授权设置界面
  openSetting() {
    const _this = this
    let promise = new Promise((resolve, reject) => {
      wx.showModal({
        title: '授权',
        content: '请先授权获取摄像头权限',
        success(res) {
          if (res.confirm) {
            wx.openSetting({
              success(res) {
                if (res.authSetting['scope.camera']) { // 用户打开了授权开关
                  resolve(true)
                } else {
                  // 用户没有打开授权开关， 继续打开设置页面
                  _this.openSetting().then(res => {
                    resolve(true)
                  })
                }
              },
              fail(res) {
                console.log(res)
              }
            })
          } else if (res.cancel) {
            _this.openSetting().then(res => {
              resolve(true)
            })
          }
        }
      })
    })
    return promise;
  },
  // 拍照
  takePhoto() {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath,
          cameraStatus: false
        })
      }
    })
  },
  // 重新拍照
  rePhoto() {
    this.setData({
      cameraStatus: true,
      src: ''
    })
  }
})

WXSS文件代码

.content {
  padding: 0;
  margin: 0;
  position: fixed;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: space-between;
  overflow: hidden;
  height: 100vh;
}

image {
  margin: 0;
  padding: 0;
}

.content .camera-con {
  flex: 1;
  overflow: hidden;
}

.content .camera-con image,
.content .camera-con camera {
  width: 100%;
  height: calc(100vh - 148rpx);
}

.content .btn-con {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 148rpx;
  background-color: #333333;
}

.content .btn-con button {
  margin: 0 30rpx;
}

.content .btn-con .take {
  border: 2rpx solid #FFFFFF;
  border-radius: 50%;
  height: 93rpx;
  width: 93rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}