up

chenyincheng

2022-12-26 f787bf4f4631b2ecb6bb6b46f52a9c7e3f8f8cc0

 src/views/login/index.vue

@@ -2,16 +2,18 @@
    <teleport to="body">
      <div class="mask">
        <el-header class="go">
          <div>
            请把头移动到摄像头能拍到的位置，不要动 ！
          </div>
          <div class="box">
            <video id="videoCamera" class="canvas" :width="videoWidth" :height="videoHeight" autoPlay></video>
            <canvas id="canvasCamera" class="canvas" :width="videoWidth" :height="videoWidth"></canvas>
            <canvas id="canvasCamera" class="canvas" :width="300" :height="300"></canvas>
          </div>
          <div class="footer">
            <el-button @click="getCompetence" icon="el-icon-video-camera"> 打开摄像头 </el-button>
            <el-button @click="drawImage" icon="el-icon-camera"> 拍照 </el-button>
            <el-button @click="stopNavigator" icon="el-icon-switch-button"> 关闭摄像头 </el-button>
            <el-button @click="resetCanvas" icon="el-icon-refresh"> 重置 </el-button>
            <el-button @click="$emit('closed')" class="closeBtn">关闭</el-button>
          </div>
        </el-header>
      </div>
@@ -20,11 +22,6 @@
  <script lang="ts" setup>
  import { ref, reactive, inject, toRefs, nextTick } from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  const message = inject("$message");
  const config = inject("$CONFIG");
  const tool = inject("$TOOL");
  const api = inject("$API");

  const loading = ref(false);
  const os = ref(false); //控制摄像头开关
  let thisVideo = ref("");
@@ -107,7 +104,7 @@
    thisCancas = document.getElementById("canvasCamera");
    thisContext = thisCancas.getContext("2d");
    thisVideo = document.getElementById("videoCamera");
     thisContext.drawImage(thisVideo, 0, 0, 500, 500);
     thisContext.drawImage(thisVideo, 0, 0, 300, 300);
    //获取图片地址
    queryParams.imgSrc = thisCancas.toDataURL('image/png');
    console.log(queryParams.imgSrc);
@@ -149,22 +146,10 @@
    justify-content: space-between;
    float: left;
    margin-top: 217px;
  }
  .detailed {
    width: 1200px !important;
    height: 800px !important;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    z-index: 1999;
  }
   
   
  .oText {
    margin-left: 42px;
  }
  
  .mask {
    position: absolute;
    top: 0;