前言

图文识别相信大家都不陌生，它能够通过手机的拍照或者选择手机相册图片进行智能识别，识别出来的文字可以智能根据图片文字段落进行排版，应用提供复制识别内容和保存内容功能便于使用识别出来的内容，今天教大家在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.1 参数

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"
}
1
2
3
4
5
6
7
8

---

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

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

2.1 参数

URL参数：

Header参数：

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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

---

实现代码

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

因为我们是调用的外部接口，为避免产生跨域的问题，我们需要将地址做代理处理，在根目录下创建 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': ''
                }
            },
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

引入的 request.js 文件

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

---

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