微信小程序实现身份证拍摄

1、wxml

<camera class="camera-photo" frame-size="small" device-position="{{devBack}}" flash="off" binderror="error" style="width:{{info.windowWidth}}px;height:{{info.windowHeight}}px;">
	<cover-view class="page-flex" style="width:{{info.windowWidth}}px; height:{{info.windowHeight}}px;">
		<cover-view style="height:{{info.windowHeight}}px;" class="page-mask page-mask-lr"></cover-view>
		<cover-view class="page-content" style="height:{{info.windowHeight}}px;">
			<cover-view class="page-mask" style="height:{{convasY-60}}px;"></cover-view>
			<cover-view style="width:{{canvasWidth}}px; height:{{canvasHeight}}px;margin:auto"></cover-view>
			<cover-view class="page-mask tackPhoto" style="height:{{convasY+60}}px">
        <cover-view class="confirm-photo" bindtap="takePhoto">确定</cover-view>
        <cover-view bindtap="cancelPhoto" class="cancel">取消</cover-view>
      </cover-view>
		</cover-view>
		<cover-view style="height:{{info.windowHeight}}px;" class="page-mask page-mask-lr"></cover-view>
	</cover-view>
  <cover-view class="id-card">
    请拍摄身份证
    <cover-view class="id-card-text">{{maskMsg}}面</cover-view>
  </cover-view>
</camera>

<canvas wx:if="{{isCanvas}}" class="canvas-style" canvas-id="myCanvas" style="width:{{canvasWidth}}px; height:{{canvasHeight}}px;"></canvas>
<cover-image wx:if="{{isBaseImg}}" class="base-img" mode="aspectFit" style="width:{{info.windowWidth}}px;height:{{info.windowHeight}}px;" src="{{baseImg}}"></cover-image>
<cover-view wx:if="{{isSuccess}}" style="width:{{info.windowWidth}}px;height:{{info.windowHeight}}px;" class="success-img">
  <cover-image style="width:{{canvasWidth}}px; height:{{canvasHeight}}px;margin:{{convasY-40}}px auto;" src="{{srcCanvasPath}}"></cover-image>
    <cover-view class="after-img-tips" style="color:#fff">
      <!-- 取消绘制，重新绘制 -->
      <cover-view class="back" catchtap="clearPhoto">重新绘制</cover-view>
      <!-- 确定绘制，返回到相应的页面，或者隐藏camera组件 -->
      <cover-view class="back" catchtap="confirmBack">绘制完成</cover-view>
  </cover-view>
</cover-view>

2、wxss

page{
  width: 100%;
  height: 100%;
  padding: 0;
}
.lary-top{
  position: fixed;
  z-index: 101;
  top: 0;
  width: 100%;
  background:#3b8bff
}
.camera-photo{
    position: fixed;
    z-index: 100;
    overflow: hidden;
}
.page-flex{
    display: flex;
}
.page-mask{
  background-color: rgba(0,0,0,0.6);
}
.page-mask-lr{
  width: 90rpx;
}
.page-content{
  flex:1
}
.tackPhoto{
  color:#fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm-photo{
  width: 130rpx;
  height: 130rpx;
  background-color: #3b8bff;
  border-radius: 50%;
  text-align: center;
  line-height: 130rpx;
}
.cancel{
  position: absolute;
  right: 90rpx;
}

.id-card{
  position: absolute;
  font-size: 36rpx;
  color: #fff;
  top:50%;
  right: 40rpx;
  display: flex;
  align-items: center;
  transform-origin: right;
  transform: rotate(90deg);
  letter-spacing: 8rpx;
}
.id-card-text{
  color:#3b8bff;
  padding-left: 8rpx;
}




.base-img{
  position: fixed;
  z-index: 101;
}
.success-img{
  position: fixed;
  z-index: 101;
  background-color: black;
}
.after-img-tips{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: fixed;
  bottom: 75rpx;
  padding-left: 60rpx;
  padding-right: 60rpx;
  box-sizing: border-box;
}
.back{
  width: 141rpx;
  height: 141rpx;
}

2、js

const app = getApp()
let ctxWidth = '';
let ctxHeight = '';
let ctx = null; //Camera
let canvaCtx=null;//canvas
Page({
  data: {
    devBack:'back',
    // maskMsg:'人物',
    maskMsg:'国徽'
  },

  onLoad() {

  },

  onShow() {
    this.changeText()
  },

  changeText() {
    wx.getSystemInfo({
      success: res => {
        let convasX = res.windowWidth / 4; //遮罩层上下的高度(生成canvas的起始横坐标)
        let convasY = res.windowHeight / 5; //遮罩层左右的宽度(生成canvas的起始纵坐标)
        let canvasWidth = convasX * 3; //中间裁剪部位的宽度
        let canvasHeight = convasY * 3; //中间裁剪部位的高度
        let convasXL = convasX / 2;
        ctxWidth = canvasWidth; //canvas的宽度
        ctxHeight = canvasHeight; //canvas的高度
        this.setData({
          info: res,
          canvasWidth,
          canvasHeight,
          convasX,
          convasXL,
          convasY
        })
      }
    })
  },

  takePhoto() {
    ctx = wx.createCameraContext(); //初始化camera
    ctx.takePhoto({ //生成图片
      quality: 'high',
      success: (res) => { //得到图片
        console.log(res.tempImagePath)
        this.takeCanvas(res.tempImagePath)
        this.setData({
          baseImg: res.tempImagePath,
          isBaseImg: true,
          isCanvas:true
        })
      }
    })
  },

  cancelPhoto(){
    wx.switchTab({
      url: '../tab/tab1/index',
    })
  },

  takeCanvas(path) { //将拍摄的照片绘制到canvas上
    wx.getImageInfo({
      src: path,
      success: imgInfo => {
        let {info} = this.data;
        let convasX = imgInfo.width / 4;
        let convasY = imgInfo.height / 5;
        let canvasWidth = convasX * 3;//显示区域宽度
        let canvasHeight = convasY * 3;//显示区域高度
        let convasXL = convasX / 2;
        // 我这里宽度和高度都计算了设备比，其实两个值是一样的 ，计算一个就够了
        let prxWidth = info.windowWidth / imgInfo.width;//计算设备比
        canvaCtx = wx.createCanvasContext("myCanvas");//自定义组件，需要加this
        canvaCtx.drawImage(path,convasXL,(convasY-120),canvasWidth,canvasHeight,0,0,(parseInt(canvasWidth) * prxWidth),(parseInt(canvasHeight) * prxWidth));//绘制到canvas上的位置，canvas的宽高等
        canvaCtx.draw(true, () => {
          wx.canvasToTempFilePath({
            fileType: "jpg",
            quality: 0.3,
            canvasId: "myCanvas",
            success: canvasToPath => {
              this.setData({
                isSuccess:true,
                isBaseImg: false,
                isCanvas:false,
                baseImg: canvasToPath.tempFilePath,
                srcCanvasPath: canvasToPath.tempFilePath
              })
            }
          })
          
        })
      }
    })
  },

  clearPhoto(){
    canvaCtx.clearRect(0,0,ctxWidth, ctxHeight)
    canvaCtx.draw()
    this.setData({
        srcCanvasPath:"",
        isCanvas:false,
        isSuccess:false,
        isBaseImg:false
    })
  },

  confirmBack(){//确定绘制成功后的操作，根据自己的需求写即可
 
  }

})