OCR -上传图片自动识别文字并填充

达拉崩巴斑得贝迪卜多比鲁翁_

已于 2022-06-28 14:53:20 修改

阅读量2.4k

点赞数

文章标签： javascript 大数据开发语言

于 2022-06-28 14:22:50 首次发布

本文链接：https://blog.csdn.net/weixin_46034375/article/details/125501210

版权

博客介绍了OCR（光学字符识别）技术在自动识别证件文字信息方面的应用，如身份证、票据等。通过上传图片，利用TextIn等产品，可以实现信息的自动填充。提供的代码示例展示了如何使用API进行实现实时识别，并且提供了免费试用的额度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上传证件照片，自动识别证件上的文字信息，并填充在适当的位置

！！不是广告！！

这种技术叫 OCR文字识别

OCR（optical character recognition）文字识别是指电子设备（例如扫描仪或数码相机）检查纸上打印的字符，然后用字符识别方法将形状翻译成计算机文字的过程。
也就是对文本资料进行扫描，然后对图像文件进行分析处理，获取文字及版面信息的过程

像我们平时看到的上传身份证自动识别文字，以及上传票据，识别信息，自动填写，都是用的文字识别技术。

OCR技术产品：合合信息， TextIn(合合下的)，百度智能云，悦保科技

有兴趣的小伙伴可以自行研究一下，横向了解一下，对比之后从设计角度看到不通方案适用的场景。

我选择的是 TextIn 产品，他有个体验中心，可以先看到效果，再按需选择使用。

在这里插入图片描述
也有开放的集成api

在这里插入图片描述

总体感觉文章写的挺清晰明了的，免费试用的有1000张限额，如果只是作为了解测试，也够用了。
下面是我实现的效果，可以参考一下：
在这里插入图片描述

相关代码:

<template>
  <div>
    <el-upload class="upload-demo" action="//" :before-upload="before">
      <el-button size="small" type="primary" v-loading.fullscreen.lock="fullscreenLoading" class="mt20">点击上传</el-button>
    </el-upload>
    <el-card class="box-card mt20">
      <div slot="header" class="clearfix">
        <span>个人基本信息</span>
      </div>
      <p>证件类型: {{info.type_description}}</p>
      <div v-for="(item, index) in info.item_list" :key="index">
        <p>{{item.description}}: {{item.value}}</p>
        <!-- <img :src="'data:image/jpeg;base64,' + `${item.value}`" alt=""> -->
      </div>
    </el-card>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      info: {},
      fullscreenLoading: false
    }
  },
  methods: {
    before (file) {
      this.fullscreenLoading = true
      var that = this
      var reader = new FileReader()
      reader.readAsArrayBuffer(file) // 读取成二进制
      reader.onload = function (e) {
        var fileData = this.result
        axios
          .post('https://api.textin.com/robot/v1.0/api/id_card', fileData, {
            headers: {
              'x-ti-app-id': '911749fba5a76075774fdab8f14a165a',
              'x-ti-secret-code': '348ddae947e609bcc48a8b7359834a90',
              'Content-Type': 'application/octet-stream'
            }
          }).then((res) => {
            const { result, code } = res.data
            that.fullscreenLoading = false
            if (code === 200) {
              that.info = result
            }
          }, (err) => {
            console.log(err)
          }).catch((err) => {
            console.log(err.message)
          })
      }

      return false
    }
  }
}
</script>
<style>
.mt20 {
  margin-top: 20px;
}
</style>