vue+tracking.js H5人脸识别-拍照转base64

最新推荐文章于 2024-12-21 14:22:36 发布

原创

最新推荐文章于 2024-12-21 14:22:36 发布 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

npm install tracking
安装完直接复制以下代码到页面使用即可

<template>
  <div id="seePerson">
    <div v-show="showContainer" class="face-capture" id="face-capture">
      <p class="tip">请保持人像在取景框内</p>
      <video
        id="video"
        :width="vwidth"
        :height="vheight"
        playsinline
        webkit-playsinline
      ></video>
      <canvas id="refCanvas" :width="cwidth" :height="cheight"></canvas>
      <!-- <img class="img-cover" :src="getImageUrl('yuan')" alt="" /> -->
      <!-- <div class="yuan"></div> -->
      <p class="contentp">{
   
   {
   
    scanTip }}</p>
    </div>
    <div v-if="!showContainer" class="img-face">
      <img class="imgurl" :src="imgUrl" />
    </div>
    <div class="face-card">
      <van-form @submit="onSubmit">
        <van-field name="fileList" label="身份证上传">
          <template #input>
            <van-uploader v-model="fileList" :after-read="afterRead" />
          </template>
        </van-field>
        <van-field
          v-model="username"
          name="username"
          label="法人信息"
          placeholder="法人信息"
          :rules="[{ required: true, message: '请填写法人信息' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="身份证号码"
          placeholder="身份证号码"
          :rules="[{ required: true, message: '请填写身份证号码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
require("tracking/build/tracking-min.js");
require("tracking/build/data/face-min.js");
require("tracking/build/data/mouth-min.js");
require("tracking/examples/assets/stats.min.js");
export default {
   
   
  data() {
   
   
    return {
   
   
      username: "",
      password: "",
      fileList: [],
      screenSize: {
   
   
        width: window.screen.width,
        height: window.screen.height,
      },
      URL: null,
      streamIns: null, // 视频流
      showContainer: true, // 显示
      tracker: null,
      tipFlag: false, // 提示用户已经检测到
      flag: false, // 判断是否已经拍照
      context: null, // canvas上下文
      profile: [], // 轮廓
      removePhotoID: null, // 停止转换图片
      scanTip: "人脸识别中...", // 提示文字
      imgUrl: "",
      canvas: null,
      trackertask: null,