vue基于百度云实现行驶证识别

Posted 2022-08-11 水星记_

前言

图文识别相信大家都不陌生，它能够通过手机的拍照或者选择手机相册图片进行智能识别，识别出来的文字可以智能根据图片文字段落进行排版，应用提供复制识别内容和保存内容功能便于使用识别出来的内容，今天教大家在vue中实现这个简单的操作。

---

实现效果

---

实现思路

1. 注册一个百度云账号，拿到创建应用的 AppID、API Key、Secret Key；
2. 将拿到的 AppID、API Key、Secret Key 作为参数传递并调用百度云接口获取 Access Token；
3. 将拿到的 Access Token 作为参数传递并调用行驶证识别的接口即可。

1. 获取 Access Token 的接口 接口文档地址

https://aip.baidubce.com/oauth/2.0/token

1.1 参数

参数	值
grant_type	必须参数，固定为client_credentials
client_id	必须参数，应用的API Key
client_secret	必须参数，应用的Secret Key

1.2 返回值

  "refresh_token": "25.b55fe1d287227ca97aab219bb249b8ab.315360000.1798284651.282335-8574074",
  "expires_in": 2592000,
  "scope": "public wise_adapt",
  "session_key": "9mzdDZXu3dENdFZQurfg0Vz8slgSgvvOAUebNFzyzcpQ5EnbxbF+hfG9DQkpUVQdh4p6HbQcAiz5RmuBAja1JJGgIdJI",
  "access_token": "24.6c5e1ff107f0e8bcef8c46d3424a0e78.2592000.1485516651.282335-8574074",
  "session_secret": "dfac94a3489fe9fca7c3221cbf7525ff"

---

2. 调用识别接口 识别接口文档

https://aip.baidubce.com/rest/2.0/ocr/v1/vehicle_license

2.1 参数

URL参数：

参数	值
access_token	通过获取 Access Token 的接口返回的 access_token

Header参数：

参数	值
Content-Type	application/x-www-form-urlencoded

2.2 返回值

	"words_result": 
		"车辆识别代号": 
			"words": "SSVUDDTT2J2022558"
		,
		"住址": 
			"words": "中牟县三刘寨村"
		,
		"发证日期": 
			"words": "20180313"
		,
        "发证单位": 
			"words": "北京市公安局公安交通管理局"
		,
		"品牌型号": 
			"words": "大众汽车牌SVW6474DFD"
		,
		"车辆类型": 
			"words": "小型普通客车"
		,
		"所有人": 
			"words": "郑昆"
		,
		"使用性质": 
			"words": "非营运"
		,
		"发动机号码": 
			"words": "111533"
		,
		"号牌号码": 
			"words": "豫A99RR9"
		,
		"注册日期": 
			"words": "20180312"
		
	,
	"log_id": "1290127183406170112",
	"words_result_num": 11

---

实现代码

<template>
  <div class="outerBox">
    <!-- 上传 -->
    <div class="inputBox">
      <input type="file" id="file" @change="filechange($event)" />
    </div>
    <!-- 识别的数据 -->
    <div class="contantBox" v-for="(item,index) in drivingData" :key="index">
      <p>
        <span>住址：</span>
        <span>item.住址.words</span>
      </p>
      <p>
        <span>使用性质：</span>
        <span>item.使用性质.words</span>
      </p>
      <p>
        <span>发动机号码：</span>
        <span>item.发动机号码.words</span>
      </p>
      <p>
        <span>发证单位：</span>
        <span>item.发证单位.words</span>
      </p>
      <p>
        <span>发证日期：</span>
        <span>item.发证日期.words</span>
      </p>
      <p>
        <span>号牌号码：</span>
        <span>item.号牌号码.words</span>
      </p>
      <p>
        <span>品牌型号：</span>
        <span>item.品牌型号.words</span>
      </p>
      <p>
        <span>所有人：</span>
        <span>item.所有人.words</span>
      </p>
      <p>
        <span>注册日期：</span>
        <span>item.注册日期.words</span>
      </p>
      <p>
        <span>注册日期：</span>
        <span>item.注册日期.words</span>
      </p>
      <p>
        <span>车辆识别代号：</span>
        <span>item.车辆识别代号.words</span>
      </p>
    </div>
  </div>
</template>

<script>
import request from "../utils/request";
export default 
  data() 
    return 
      drivingData: [], //识别的数据
    ;
  ,
  methods: 
    filechange(e) 
      this.drivingData = []; //每次调用上传文件时清空数组
      // 将取到的文件流转换成base64格式
      if (window.FileReader) 
        let reader = new FileReader();
        reader.readAsDataURL(e.target.files[0]);
        reader.onload = (e) => 
          let base64String = e.target.result;
          this.tokenBaidu(base64String); //调用获取access_token方法
        ;
      
    ,
    //获取access_token方法
    tokenBaidu(data) 
      // 调用接口获取access_token
      request(
        method: "get",
        url: "/oauth/2.0/token?grant_type=client_credentials&client_id=NT0xub7LOs1rY6sM3a0LeZy7&client_secret=VpdqP4FjnPV0c7sXK3S128U07GYml5sQ",
      ).then((res) => 
        this.xszOCR(res.data.access_token, data); //调用识别接口
      );
    ,
    // 识别接口
    xszOCR(token, data) 
      const params = new FormData(); // 声明formData数据类型
      params.append("image", data); //图片base64
      params.append("access_token", token); //access_token
      request
        .post("/rest/2.0/ocr/v1/vehicle_license", params, 
          headers: 
            "Content-Type": "application/x-www-form-undefined",
          ,
        )
        .then((res) => 
          // 赋值操作
          console.log(res.data.words_result);
          this.drivingData.push(res.data.words_result);
        );
    ,
  ,
;
</script>
<style scoped>
.outerBox 
  padding: 10px;

.inputBox 
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  background: white;

.contantBox 
  margin: 10px 0px;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgb(145, 219, 222);

.contantBox p 
  padding: 2px 0px;

p span:first-child 
  font-weight: bold;

</style>

因为我们是调用的外部接口，为避免产生跨域的问题，我们需要将地址做代理处理，在根目录下创建 vue.config.js 文件，在此文件中设置代理的配置即可。

vue.config.js 文件

module.exports = 
    devServer: 
        host: "192.168.0.123",
        port: 8080, // 端口号
        https: false, // https:type:Boolean
        open: true, //配置自动启动浏览器
        hotOnly: true, // 热更新
        proxy: 
            // 代理配置前缀
            "/baidu": 
                target: 'https://aip.baidubce.com/', // 域名
                changeOrigin: true, // 是否跨域
                secure: false, //如果是https接口，就需要配置这个参数
                timeout: 50000, //超时时间
                pathRewrite: 
                    '^/baidu': ''
                
            ,
        
    

引入的 request.js 文件

import axios from 'axios'//引入axios
//通过配置对象返回一个axios实例对象
const service = axios.create(
    baseURL: "/baidu",//url地址
    timeout: 50000,//超时时间
)
export default service

---

有关于在微信小程序中如何实现识别功能的，大家可移步博主另一篇文章 微信小程序基于百度云实现图文识别（胎教级教程）