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

╰+哭是因爲堅強的太久メ 2023-10-09 16:38 6阅读 0赞

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