uni-app实现小程序身份证取景框

<template>
    <view class="">
        <view class="container">
            <view class="text">
			    请将<span style='margin: 0;'>{{idcardFrontSide == 1?'人像':'国徽'}} </span>面放到框内,确保  <span> 1.边角完整 2.文字清晰 </span>
		    </view>
            <camera
                id="camera"
                mode="normal" 
                device-position="back" 
                flash="off"  
                :style="{height:cameraHeight + 'px',width:cameraWidth+'px!important'}"
                >
                <cover-view class="controls" style="width: 100%;height: 100%;">
                    <cover-image src="/static/img/sfz.png" /> 
                </cover-view>
            </camera>
            <view @click="takePhoto" class="photoConfirm">
                <view class=""> </view>
            </view>
        </view>
        <view style="opacity:0;position:fixed;left:100%"> //设置样式不让画布显示到页面可视区域
            <canvas canvas-id="myCanvas" ></canvas>
        </view>
    </view>
</template>

 /static/img/sfz.png  是一个透明背景的图片,只用了一个,用文字判断是那一面,

也可以用不同的图片,在代码里写两个<cover-image src="图片路径"   /> 根据类型判断显示哪个

<script>
export default {
  data() {
     return {
         cameraHeight:0,
         cameraWidth:0,
         cameraContext: null,
         idcardFrontSide: 1,
      }
   },
  onLoad(options) {
     //获取上一个页面身份证正反面类型的参数
     this.idcardFrontSide = options.type
     if(uni.createCameraContext) {
        this.cameraContext = uni.createCameraContext()
     }else {
        uni.showModal({
           title: '提示',
           content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
        })
    }
    let systemInfo = uni.getSystemInfoSync()
    this.cameraWidth = systemInfo.windowWidth - 30

    //根据取景框图片的比例算出camer的宽高
    this.cameraHeight = 285*(systemInfo.windowWidth - 30)/414
  },
  methods: {
     takePhoto(){
        const ctx2 =uni.createCanvasContext('myCanvas')
        this.cameraContext.takePhoto({
            quality: 'high',
            success:async (res)=>{ 
            const that = this
            if(ctx2){
               uni.getImageInfo({
                 src:res.tempImagePath,
                 success: function(image) {
                 //截取图片指定部分并绘制到canvas
                ctx2.drawImage(image.path,  0, 0, image.width , image.height)
                    //将canvas内容保存为图片
                     ctx2.draw(false, uni.canvasToTempFilePath({
                     canvasId: 'myCanvas',
                     width: image.width,
                     height: image.height,
                     fileType: 'png',
                     success: async (res) => {
                       const imgPath = String(res.tempFilePath)
                       //封装的请求方法
                    let response = await that.$uploadFile(`接口`, '参数', );
                       let result = JSON.parse(response)
                       if(result.code != 200) {
                           that.$util.msg(result.msg);
                           return false;
                        }else{
                        //这里用的从上一页点击拍摄的时候进入该页面,上传成功后返回上一页并回传值
                           if(that.idcardFrontSide == 1) {
                              that.$util.prePage().sfzObj.idcard = result.idCard; 
                              that.$util.prePage().sfzObj.name = result.name; 
                           }
                           that.$util.prePage().sfzObj.url = result.url;
                           uni.navigateBack();
                        }
                     },fail: (res) => {
                        console.log(res)
                    }
                  },that) )
                }
              })
            }    
         },fail: (err) => {
             uni.showToast({
                title:'拍照失败，请检查系统是否授权',
                icon: 'none',
                duration: 1200
              })
         }
       })
     },
   }
}
</script>

<style scoped lang="less">
    .container{
        position: absolute; top: 50%; left:50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        .text{
            text-align: center;color: #ff0000;margin: 20rpx 0;  margin: 20rpx 0; font-size: 26rpx; font-weight: bold;
            span{color: #0062CC;margin-left: 10rpx;display: inline-block;font-size: 28rpx; }
        }
    }
    .photoConfirm{
        margin: 40rpx auto;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 6px solid #5996cc;
        color: #7b6f6f;
    }
    .photoConfirm>view{
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 5px solid #5996cc;
        position: relative;
        top: 50%;
        left: 50%;
        margin-left: -18px;
        margin-top: -18px;
    }
</style>

最终效果:如下图

 看了好多大佬的文章才最终完成整个画图绘制canvas,可以直接从跳转拍摄带回后台返回数据返回到上一个拍摄页面