微信小程序调用摄像头实现手机拍照的功能源码

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;
}