微信小程序—自定义相机

小程序自定义相机？其实有些名不副实，因为小程序给提供的接口简单到不能再简单，不给你丝毫修改的机会，能做的不过是在相机上覆盖cover-view、cover-image、canvas之类的，来提升相机的拍照体验。今天说的这个自定义相机是除了增加拍照之前的体验之外，拍照之后也增加了图片的处理，如下
效果：

效果说明：
将一张png覆盖在相机上，拍照后，将这张图片与所拍摄照片通过canvas直接拼接，技术没什么，感觉只要png足够丰富，还是一款蛮不错的应用程序。
体验：

代码：
js

const ctxPuzzle = wx.createCanvasContext("puzzleCanvas", this)
Page({
  data:{
    cameraInfo: {
      width: 0,
      height:0,
    },
    systemInfo:{},
    frameImageInfo:{},
    devicePosition:'back'
  },
  onLoad() {
    var that = this
    that.ctx = wx.createCameraContext()
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          menuButtonBoundingClientRect: wx.getMenuButtonBoundingClientRect(),
          systemInfo:res
        })
        wx.getImageInfo({
          src: 'cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/frame/kisspng-pink-butterfly-pink-frame-5a9bce6d7bac80.7134860815201603655066.png',
          success:res=>{
            console.log(res)
            console.log(that.data.systemInfo)
            var cameraInfo = {}
            cameraInfo.width = that.data.systemInfo.windowWidth
            cameraInfo.height = that.data.systemInfo.windowWidth / res.width * res.height
            cameraInfo.top = (that.data.systemInfo.windowHeight-cameraInfo.height)/2
            that.setData({
              cameraInfo:cameraInfo,
              frameImageInfo:res
            })
            console.log(that.data.cameraInfo)
          }
        })
      },
    })
  },
  takePhoto() {
    var that = this
    that.ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        wx.getImageInfo({
          src: res.tempImagePath,
          success:res=>{
            console.log(res)
            ctxPuzzle.drawImage(res.path, 0, res.height*that.data.cameraInfo.top/that.data.systemInfo.windowHeight, res.width, res.height*that.data.cameraInfo.height/that.data.systemInfo.windowHeight, 0, 0, that.data.cameraInfo.width, that.data.cameraInfo.height)
            ctxPuzzle.drawImage(that.data.frameImageInfo.path, 0, 0, that.data.frameImageInfo.width, that.data.frameImageInfo.height,0,0,that.data.cameraInfo.width,that.data.cameraInfo.height)
            ctxPuzzle.draw()
            var timeName = setTimeout(function () {
              wx.canvasToTempFilePath({
                canvasId: 'puzzleCanvas',
                fileType: "png",
                success: function (res) {
                  // wx.hideLoading()
                  // that.setData({
                  //   completeImageInfo: res.tempFilePath
                  // })
                  wx.previewImage({
                    urls: [res.tempFilePath],
                  })
                  clearTimeout(timeName)
                }
              })
            }, 1000)
          }
        })
      }
    })
  },
  switchCamera(){
    if(this.data.devicePosition=="back"){
      this.setData({
        devicePosition:"front"
      })
    }else{
      this.setData({
        devicePosition: 'back'
      })
    }
  },
  startRecord() {
    this.ctx.startRecord({
      success: (res) => {
        console.log('startRecord')
      }
    })
  },
  stopRecord() {
    this.ctx.stopRecord({
      success: (res) => {
        this.setData({
          src: res.tempThumbPath,
          videoSrc: res.tempVideoPath
        })
      }
    })
  },
  error(e) {
    console.log(e.detail)
  },

  go2Home() {
    wx.navigateBack({
      delta: 1,
    })
  },
})

wxml

<cover-view style="width:{{menuButtonBoundingClientRect.height+20}}px;height:{{menuButtonBoundingClientRect.height-1}}px ;position: fixed;z-index: 3000;opacity:0.5;border-radius:{{menuButtonBoundingClientRect.height/2}}px;border:1rpx solid #ededed;top:{{menuButtonBoundingClientRect.top}}px;left:{{systemInfo.windowWidth-menuButtonBoundingClientRect.right}}px" hover-class="hover-home" class="home" hover-start-time="20" hover-stay-time="70" bindtap="go2Home">
</cover-view>
<cover-image style="position: fixed;z-index: 3001;width:{{menuButtonBoundingClientRect.height-10}}px;height:{{menuButtonBoundingClientRect.height-10}}px;top:{{menuButtonBoundingClientRect.top+5}}px;left:{{systemInfo.windowWidth-menuButtonBoundingClientRect.right+15}}px"  src="../navigationBar/utils/home.png" bindtap="go2Home"></cover-image>
<view class="container">
  <canvas canvas-id="puzzleCanvas" style="width:{{cameraInfo.width}}px;height:{{cameraInfo.height}}px;position:absolute;left:-999999px"></canvas>
  <camera device-position="{{devicePosition}}" flash="off" binderror="error" style="width:100%;height:{{systemInfo.windowHeight}}px;"></camera>
  <cover-view class="frame-container">
    <cover-view style="width:100%;height:{{cameraInfo.top}}px;background:black"></cover-view>
    <cover-image style="width:{{cameraInfo.width}}px;height:{{cameraInfo.height}}px;" src="{{frameImageInfo.path}}"></cover-image>
    <cover-view style="width:100%;height:{{cameraInfo.top}}px;background:black"></cover-view>
  </cover-view>
  <cover-view class="control-container">
  </cover-view>
  <cover-view style="display: flex;flex-direction: row;justify-content: center;align-items: center;width:130rpx;height:130rpx;border:15rpx solid white;border-radius:80rpx;position:fixed;z-index:2001;bottom:20rpx">
    <cover-view class="control-takePhoto" hover-class="control-takePhoto-hover" hover-start-time="20" hover-stay-time="70" style="display: flex;flex-direction: row;justify-content: center;align-items: center;background:white;" bindtap="takePhoto">
    </cover-view>
  </cover-view>
    <cover-image class="control-switch" src="./switch.png" bindtap="switchCamera"></cover-image>
</view>

wxss

page{
  background: black
}
.frame-container{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position:fixed;
  z-index:1000;
}

.control-container{
  width: 100%;
  height: 200rpx;
  position:fixed;
  z-index:2000;
  bottom: 0;
  background: black;
  opacity: 0.6
}
.control-takePhoto{
  width:120rpx;height:120rpx;border-radius:60rpx;
}
.control-takePhoto-hover{
  width:110rpx;height:110rpx;border-radius:55rpx;
}
.control-switch{
  width:80rpx;height:80rpx;
  position:fixed;
  z-index:2000;
  bottom: 60rpx;
  right: 60rpx;
}

.home{
  background: white
}
.hover-home{
  background: #ededed
}