前端之家

  1. 首页
  2. 博文

记录--如何在H5中实现OCR拍照识别身份证功能

• 博文 • 作者：林恒

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

记录--如何在H5中实现OCR拍照识别身份证功能

业务背景

由于当前项目中需要实现身份证拍照识别的功能，如果是小程序可以使用微信提供的 ocr-navigator 插件实现,但是在企业微信的H5中没有提供该插件，所以需要手动实现该功能。

需求分析及资料查阅

众所周知，前端H5中浏览器打开相机打开的是原生相机，无法在相机的界面上覆盖自定义的元素，比如实现类似下面的UI界面,无法使用相机拍照功能来直接实现，所以只能另辟蹊径。

 

记录--如何在H5中实现OCR拍照识别身份证功能

  • 通过查阅资料发现，可以通过MediaDevices.getUserMedia()来实现媒体流的输出，这时可以在页面中添加video元素，然后把stream流的值赋值给video的srcObject属性，就可以把video输出到页面上，这样就可以在video元素上面添加自定义元素，实现UI效果。

  • 还需要解决的问题是：如何点击下面的拍照按钮时把获取画面转换成图片，并调用Api实现图片识别功能。 此时需要使用canvas来实现。通过canvas将video视频的当前帧绘制到画布上，然后将其转换成图片，然后调用接口来实现身份证识别。

snapPhoto() {
  const canvas = document.querySelector("#mycanvas");
  canvas.width = this.video.videoWidth;
  canvas.height = this.video.videoHeight;
  canvas.getcontext("2d").drawImage(this.video,0);
  const imageBase64 = canvas.toDataURL("image/png",0.6);
  return imageBase64
}

需求实现

话不多说，直接上代码(注意：该页面代码 vue-cli3 + vue2 + vant + 企业微信环境)

<template>
  <div class="ocr-id-card">
    <div id="cover" class="cover">
      <div class="id-card-container"></div>
      <video ref="videoRef" class="media-video" autoplay playsinline></video>
    </div>
    <div class="footer-tip font-24 radius-32 color-fff flex-center">请将证件放于框内拍摄</div>
    <div class="footer-btn">
      <div class="album" @click="chooseLocalImage">
        <img src="@/assets/parttime-operator/album.png" alt="" class="album-img width-68 height-68" />
      </div>
      <div id="snap" class="record-btn" @click="snapPhoto"></div>
    </div>

    <canvas id="mycanvas" class="card-canvas"></canvas>
  </div>
</template>
<script>
import { uploadFileApi,idCardOcrApi } from "@/apis/common";
import { base64URLToFile } from "@/utils/base64-to-img";
export default {
  data() {
    return {
      image_url: "",// 身份证url
      imageBase64: "",// 身份证照片 base64
      cardSide: "FRONT",// 身份证正反面 FRONT：身份证有照片的一面（人像面）BACK：身份证有国徽的一面（国徽面
      video: {},videoTrack: {}
    };
  },mounted() {
    const { cardSide } = this.$route.query;
    this.cardSide = cardSide;
    this.watchPageVisible();
  },beforeRouteLeave(to,from,next) {
    if (this.videoTrack) {
      this.videoTrack.stop();
    }
    next();
  },methods: {
    // 调用摄像头
    openCamera() {
      // constraints: 指定请求的媒体类型和相对应的参数
      const constraints = {
        audio: false,video: {
          width: 1150,height: 768,frameRate: { ideal: 60 },// 视频流帧率
          facingMode: "environment" // 后置摄像头
        }
      };
      // 兼容部分浏览器
      if (!navigator.mediaDevices) navigator.mediaDevices = {};
      // 一些浏览器部分支持 mediaDevices,不能直接给对象设置 getUserMedia
      // 因为这样可能会覆盖已有的属性,只会在没有getUserMedia属性的时候添加它。
      if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function(constraints) {
          // 首先，如果有getUserMedia的话，就获得它
          const getUserMedia =
            navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.msGetUserMedia ||
            navigator.oGetUserMedia;
          if (!getUserMedia) {
            return Promise.reject(new Error("getUserMedia is not implemented in this browser"));
          }
          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
          return new Promise(function(resolve,reject) {
            getUserMedia.call(navigator,constraints,resolve,reject);
          });
        };
      }
      // 获取视频流
      navigator.mediaDevices
        .getUserMedia(constraints)
        .then(stream => {
          this.videoTrack = stream.getVideoTracks()[0];
          this.video = document.querySelector(".media-video");
          if (this.video) {
            this.video.srcObject = stream;
            this.video.onloadedmetadata = () => {
              this.video.play();
            };
          }
        })
        .catch(function(err) {
          console.error(err);
        });
    },// 监控页面visibilitychange
    watchPageVisible() {
      document.addEventListener("visibilitychange",() => {
        if (!document.hidden) {
          this.openCamera();
        } else {
          if (this.video && this.video.srcObject) {
            this.video.srcObject.getTracks().forEach(track => track.stop());
          }
        }
      });
    },// 获取视频的一帧作为图片转换为base64，调用接口识别身份证信息
    snapPhoto() {
      const canvas = document.querySelector("#mycanvas");
      canvas.width = this.video.videoWidth * 0.9;
      canvas.height = this.video.videoHeight * 0.9;
      canvas.getcontext("2d").drawImage(this.video,0);
      const imageBase64 = canvas.toDataURL("image/png",0.6);
      this.idCardRecognition(imageBase64);
    },// 身份证照片识别
    async idCardRecognition(imageBase64) {
      try {
        this.$toast.loading({
          duration: 0,// 持续展示
          message: "识别中...",forbidClick: true,loadingType: "spinner"
        });
        const params = { cardSide: this.cardSide,imageBase64 };
        const result = await idCardOcrApi(params);
        if (Object.keys(result).length) {
          const {
            Name,IdNum,ValidDate,AdvancedInfo: { IdCard }
          } = result;
          if (IdCard) {
            const imageBase64 = "data:image/png;base64," + IdCard;
            const file = await base64URLToFile(imageBase64);
            this.image_url = await this.uploadFile(file);
          }
          const id_card_end_time =
            ValidDate && ValidDate.indexOf("长期") === -1 ? ValidDate.split("-")[1].replace(/\./g,"/") : "";
          const id_card_info = {
            id_card_name: Name ? Name : "",id_card_num: IdNum ? IdNum : "",long_term: ValidDate ? (ValidDate.indexOf("长期") > -1 ? 1 : 2) : 0,id_card_end_time
          };
          if (this.cardSide === "FRONT") {
            id_card_info.id_card_front = this.image_url;
          } else {
            id_card_info.id_card_back = this.image_url;
          }
          this.$store.commit("COMMON/setIdCardInfo",id_card_info);
        } else {
          const file = await base64URLToFile(imageBase64);
          this.image_url = await this.uploadFile(file);
          const id_card_info = {};
          if (this.cardSide === "FRONT") {
            id_card_info.id_card_front = this.image_url;
          } else {
            id_card_info.id_card_back = this.image_url;
          }
          this.$store.commit("COMMON/setIdCardInfo",id_card_info);
        }
        this.$toast.clear();
        this.$toast({
          message: "识别成功",duration: 800,onClose: () => {
            this.$router.go(-1);
          }
        });
      } catch (err) {
        console.log(err);
      }
    },// 从相册选择图片
    chooseLocalImage() {
      // eslint-disable-next-line no-undef
      wx.chooseImage({
        count: 1,sizeType: ["compressed"],sourceType: ["album"],success: async res => {
          const id = res.localIds[0];
          // eslint-disable-next-line no-undef
          wx.getLocalImgData({
            localId: id,success: async res => {
              await this.idCardRecognition(res.localData);
              this.$toast.clear();
            },fail: err => {
              console.error("getLocalImgData err",err);
            }
          });
        }
      });
    },// 上传文件
    uploadFile(file) {
      return new Promise(async (resolve,reject) => {
        try {
          this.$toast.loading({
            message: "上传并识别中",loadingType: "spinner"
          });
          const params = new FormData();
          params.append("file",file);
          params.append("type",1);
          params.append("file_name",file.name);
          const { url } = await uploadFileApi(params);
          resolve(url);
        } catch (err) {
          reject(err);
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.ocr-id-card {
  width: 100vw;
  z-index: 2000;
  background: #fff;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;

  .cover {
    width: 100vw;
    height: calc(100vh - 300px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2001;

    .id-card-container {
      width: 708px;
      height: 460px;
      background: url("~@/assets/parttime-operator/ocr-border.png") 0 0 no-repeat;
      background-size: 708px 460px;
      position: fixed;
      top: 322px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2004;
    }
  }
  .media-video {
    width: 100vw;
    height: 100%;
    position: absolute;
    top: -25px;
    left: 0;
  }
  .footer-tip {
    width: 312px;
    height: 64px;
    background: rgba(0,0.5);
    position: fixed;
    bottom: 392px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2003;
  }
  .footer-btn {
    width: 100vw;
    height: 300px;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2005;
    .record-btn {
      width: 108px;
      height: 108px;
      background: url("~@/assets/parttime-operator/take-photo.png") 0 0 no-repeat;
      background-size: 108px 108px;
      position: absolute;
      top: 76px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2006;
    }
    .album {
      width: 80px;
      height: 80px;
      position: absolute;
      top: 90px;
      left: 120px;
      z-index: 2006;
    }
  }
  .card-canvas {
    position: fixed;
    left: -9999px;
    top: -9999px;
    z-index: 0;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
}
</style>

功能优化及兼容性bug修复

兼容性问题机注意点

  1. 本地调试打开相机需要使用https协议下才能正常调用获取媒体流的api
  2. ios环境下初次打开相机会展示直播界面，安卓系统正常
  3. 媒体流帧率问题，视频分辨率问题，顶部空白问题。
  4. ios有滚动条问题，安卓系统正常
  5. 页面退出时关闭媒体流输入，关闭相机，进入时打开媒体流输入。

解决方案

  • 本地开发时开启htpps
  devserver: {
    https: true,xxx...
  }
  • 页面中的元素使用fixed定位，并设置z-index高一些
  • 设置视频流帧率和视频流的分辨率大小，下面的width和height可根据实际情况来调整大小
const constraints = {
    audio: false,video: {
      width: 1150,// 视频流帧率
      facingMode: "environment" // 后置摄像头
    }
 };

  • ios有滚动条问题，尝试了一些css处理方案，无效，欢迎大家评论区指点迷津。

  • 调用ocr图片识别可以调用后端接口或者第三方的API来实现，例如腾讯云OCR 最后实现效果

记录--如何在H5中实现OCR拍照识别身份证功能

本文转载于:

https://juejin.cn/post/7293778347607097394

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

记录--如何在H5中实现OCR拍照识别身份证功能

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件举报，一经查实，本站将立刻删除。

本文链接：https://www.f2er.com/3188606.html

大家都在看

  • 飞码LowCode前端技术系列：如何便捷快速验证实现投产及飞码探索 博文

    飞码LowCode前端技术系列：如何便捷快速验证实现投产及飞码探索

    本篇文章从数据中心，事件中心如何协议工作、不依赖环境对vue2.x、vue3.x都可以支持、投产页面问题定位三个方面进行分析。
    2023-11-16 • 博文
  • 如何优雅使用 vuex 博文

    如何优雅使用 vuex

    大纲 本文内容更多的是讲讲使用 vuex 的一些心得想法，所以大概会讲述下面这些点： Q1：我为什么会想使用 vuex 来管理数据状态交互？ Q2：使用 vuex 框架有哪些缺点或者说副作用？ Q3：我是如何在项目里使用 vuex 的？ 初识 vuex 对于 vuex，有人喜欢，有人反感 喜欢的人觉
    2023-11-16 • 博文

  • 第三方组件及计算属性传参的问题解决方式

    1. 前言 唉，好想玩滋嘣。 2. 计算属性直接传参接收不到 表格数据某一列需要用的计算属性时，模板中使用计算属性 fullName 就会直接调用 fullName 函数，而在模板中 fullName(item) 相当于fullName()(item)，此处为函数柯里化。 &lt;el-table-
    2023-11-16 • 博文
  • 记录--Vue3基于Grid布局简单实现一个瀑布流组件 博文

    记录--Vue3基于Grid布局简单实现一个瀑布流组件

    这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前言 在学习Grid布局之时，我发现其是CSS中的一种强大的布局方案，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局，在刷某书和某宝首页时，我们发现其展示方式就是一种瀑布流，是一种流行的网站页面布局，视觉表……
    2023-11-16 • 博文

  • 用强数据类型保护你的表单数据-基于antd表单的类型约束

    接口数据类型与表单提交数据类型，在大多数情况下，大部分属性的类型是相同的，但很少能做到完全统一。我在之前的工作中经常为了方便，直接将接口数据类型复用为表单内数据类型，在遇到属性类型不一致的情况时会使用any强制忽略类型错误。后来经过自省与思考，这种工作模式会引起各种隐藏bug，一定有更……
    2023-11-16 • 博文
  • pinia的使用 博文

    pinia的使用

    前言 最近新开了个项目，以前老项目都是vue2+vuex开发的，都说用vue3+pinia爽得多，那新项目就vue3+pinia吧。这里记录一下pinia的使用。 使用方法 安装pinia: npm i pinia main.js中引入pinia: //main.js import { create
    2023-11-16 • 博文
  • 记录--让我们来深入了解一下前端“三清”是什么 博文

    记录--让我们来深入了解一下前端“三清”是什么

    这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前端“三清” 在前端开发中，我们经常听到关于“三清”的说法，即 window、document、Object。这三者分别代表了 BOM（浏览器对象模型）、DOM（文档对象模型）以及 JS 的顶层对象。在这个体系中，我们通过 JavaScr
    2023-11-16 • 博文
  • 记录--啊？Vue是有三种路由模式的？ 博文

    记录--啊？Vue是有三种路由模式的？

    这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 众所周知，vue路由模式常见的有 history 和 hash 模式，但其实还有一种方式-abstract模式（了解一哈~） 别急，本文我们将重点逐步了解： 路由 + 几种路由模式 + 使用场景 + 思考 + freestyle 路由概念
    2023-11-16 • 博文