微信小程序:camera组件使用。系统相机

wxml文件中。

<camera wx:if="{{isAuth}}" device-position="back" flash="off" binderror="error" style="width: 100%; height: 90%;">
 </camera>

调用系统相机首先需要授权。camera.js中。

微信小程序:camera组件使用。系统相机

 代码如下:

/**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {
    const _this = this
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.camera']) {
          // 用户已经授权
          _this.setData({
            isAuth: true
          })
        } else {
          // 用户还没有授权,向用户发起授权请求
          wx.authorize({
            scope: 'scope.camera',
            success() { // 用户同意授权
              _this.setData({
                isAuth: true
              })
            },
            fail() { // 用户不同意授权
              _this.openSetting().then(res => {
                _this.setData({
                  isAuth: 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 { // 用户没有打开授权开关, 继续打开设置页面
              
                }
              },
              fail(res) {
                console.log(res)
              }
            })
          } else if (res.cancel) { //用户取消了。继续提示弹出dialog,让用户授权。会死循环
           
          }
        }
      })
    })
    return promise;
  },

授权之后,点击拍照按钮,进行拍照。 拍照代码如下:

takePhoto() {
    var that = this
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high', 
      success: (res) => {
        this.setData({
            src: res.tempImagePath
          }),
          console.log(res.tempImagePath);
        wx.navigateTo({
          url: '../yulan/yulan?src=' + res.tempImagePath,
        })
      }
    })
  },

上一篇:Android调用Camera的方法


下一篇:Qcom平台 Camera 之调试单刷验证