微信小程序自定义相机功能，设置相机背景图框

2022-07-08 阅读：4667 分类：后端标签：微信小程序

我们在日常使用一些应用或者小程序，经常可以看到，比如人脸识别，会有个相机头像框，这不仅可以是用户拍照更加清晰标准，这是怎么实现的呢？

实际上，这个是定位在上面的。具体实现方法入下：

1、小程序前端wxml代码：

<view class="ddbn">
  <view class='camera'>
    <image mode="widthFix" src="{{src}}" class="bigImg"></image>
    <image src="https://www.tpxhm.com/ai/icon/camerabg.png" mode="widthFix" class="camerabg1"></image>
    <image src="https://www.tpxhm.com/ai/icon/camerabg2.png" mode="widthFix" class="camerabg2" wx:if="{{src !=''}}"></image>
    <view class="xian" wx:if="{{src !=''}}"></view>
    <camera wx:if="{{isAuth}}" device-position="{{cameraPosition}}" flash="off" binderror="error" wx:if="{{src ==''}}"></camera>
    <view class="camera_help">[ 请保持光线充足，脸部在圈内并平视摄像头 ]</view>
    <view class="camera_nav">
      <view class="camera_nav_item">
        <view class="camera_nav_item_icon">
          <image src="https://www.tpxhm.com/ai/icon/yanjing.png"></image>
        </view>
        <view class="camera_nav_item_word">不带眼镜</view>
      </view>
      <view class="camera_nav_item">
        <view class="camera_nav_item_icon">
          <image src="https://www.tpxhm.com/ai/icon/xiaolian.png"></image>
        </view>
        <view class="camera_nav_item_word">无刘海遮挡</view>
      </view>
      <view class="camera_nav_item">
        <view class="camera_nav_item_icon">
          <image src="https://www.tpxhm.com/ai/icon/wumeiyan.png"></image>
        </view>
        <view class="camera_nav_item_word">素颜无美颜</view>
      </view>
      <view class="camera_nav_item">
        <view class="camera_nav_item_icon">
          <image src="https://www.tpxhm.com/ai/icon/zhengpai.png"></image>
        </view>
        <view class="camera_nav_item_word">正面图片</view>
      </view>
    </view>
    <view class="camera_bottom_nav">
      <view class="camera_bottom_nav_item" bindtap="navToalbum">
        <image src="https://www.tpxhm.com/ai/icon/picture.png"></image>
      </view>
      <view class="camera_bottom_nav_item" bindtap="takePhoto">
        <image src="https://www.tpxhm.com/ai/icon/camerabgpai4.png"></image>
      </view>
      <view class="camera_bottom_nav_item" bindtap="cameraPosition">
        <image src="https://www.tpxhm.com/ai/icon/syscamera.png"></image>
      </view>
    </view>
  </view>
</view>

2、js代码：

Page({
  data: {
    isAuth: false,
    src: '',
    deviceposition:'front',
  },
  onLoad() {
    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 { // 用户没有打开授权开关， 继续打开设置页面
                  _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
        })
      }
    })
  },
  //使用前置摄像头/后置
  cameraPosition(){
    var that =this;
    if(that.data.cameraPosition=='back'){
      that.setData({
        cameraPosition:'front'
      })
    }else{
      that.setData({
        cameraPosition:'back'
      })
    }
  },
  //打开相册选取
  navToalbum() {
    console.log(111)
    wx.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['album'],
      maxDuration: 30,
      success(res) {
        console.log(res)
        console.log(res.tempFiles[0].tempFilePath)
        console.log(res.tempFiles[0].size)
      }
    })
  },
})

3、样式代码：

.ddbn{ width: 100%;}
.camera {
  width: 750rpx;
  height: 100%;
  border-radius: 50%;
  /* margin: 20px auto 0; */
  position: relative;
}

.camera .camerabg1 {
  position: absolute;
  width: 750rpx;
  height: 750rpx;
  z-index: 10;
  top: 250rpx;
}

.camera camera {
  width: 750rpx;
  height: 100vh;
}

button.takePhoto:not([size='mini']) {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 90rpx;
  border-radius: 0;
}
.camera_help{
  width: 750rpx;
   text-align: center;
   position: absolute;
   top: 180rpx;
   color: #e5e1e2;
   font-size: 28rpx;
}
.camera_nav{
  width: 650rpx;
  height: 150rpx;
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 1040rpx;
  left: 50rpx;
  border-radius: 15rpx;
  z-index: 15;
}
.camera_nav_item{
  width: 25%;
   float: left;
   text-align: center;
}
.camera_nav_item_icon{
  width: 50rpx;
  height: 50rpx;
  margin: 0 auto;
  margin-top: 25rpx;
  margin-bottom: 10rpx;
}
.camera_nav_item_icon image{
  width: 50rpx;
  height: 50rpx;
}
.camera_nav_item_word{
  font-size: 22rpx;
  color: #fff;
}
.camera_bottom_nav{
  width: 650rpx;
  height: 200rpx;
  position: absolute;
  left: 50rpx;
  top: 1220rpx;
  /* background-color: #000; */
  z-index: 15;
}
.camera_bottom_nav_item{
  width: 217rpx;
  height: 200rpx;
  float: left;
}
.camera_bottom_nav_item image{ 
  width: 80rpx;
  height: 80rpx;
  display: block;
  margin: 0 auto;
  margin-top: 50rpx;
}
.camera_bottom_nav_item:nth-child(2) image{ 
  height: 190rpx;
  width: 150rpx;
  margin-top:0rpx;
}
.bigImg{ width: 100%; height: 1664rpx; position: absolute; left: 0rpx; top: 0rpx; z-index: 5; }
.camerabg2{ 
  -webkit-animation: animal 1s infinite linear ;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  z-index: 20;
  width: 750rpx;
  height: 750rpx;
  top: 250rpx;
  position: absolute;
}
@-webkit-keyframes animal {
  0%{
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  100%{
    transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}
.xian{ 
  width: 750rpx;
  height: 5rpx;
  background: rgba(255, 255, 255, 0.4);
  position: absolute;
  top: 880rpx;
  left: 0rpx;
  z-index: 99;
  box-shadow:0px 0px 10px #fff;
  animation: float 4s ease infinite;
}
@keyframes float {
0% {
      transform: translate3d(0,0,0)
}
 
50% {
  transform: translate3d(0,-550rpx,0)
}
100% {
  transform: translate3d(0,0rpx,0)
}
}

这样实现了对相机拍照的自定义，主要用到了这个方法，同事也支持翻转相机，使用相册图片。

 const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })