前言
近年来，随着车辆保有量的不断增加，行驶证识别已经成为了一个备受关注的问题。基于百度云的 vue 行驶证识别技术，不仅能够帮助我们更快捷地完成车辆信息的录入，还可以大大提高工作效率。本文将为大家详细介绍这项技术的具体实现。
实现效果
实现思路
- 注册一个百度云账号，拿到创建应用的
AppID、API Key、Secret Key； - 将拿到的
AppID、API Key、Secret Key作为参数传递并调用百度云接口获取Access Token； - 将拿到的
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";
import imgCompressUtil from "../../utils/imgCompressUtil";//压缩图片的js
export default {
data() {
return {
drivingData: [], //识别的数据
};
},
methods: {
// 点击上传方法
filechange(e) {
//每次调用上传文件时清空数组
this.drivingData = [];
// 调用imgCompress图片压缩方法并将其中的file文件传递过去
this.imgCompress(e.target.files[0]);
},
//图片压缩方法
async imgCompress(file) {
await imgCompressUtil.compressImg(file).then((res) => {
this.tokenBaidu(res); //调用获取access_token方法并将压缩好的图片base64格式传递过去
});
},
//获取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); //调用识别接口并将access_token传递过去
});
},
// 识别接口方法
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) => {
// 赋值操作
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
引入的 imgCompressUtil.js 文件
const imgCompressUtil = {
compressImg(file) {
let self = this
if (!file || !window.FileReader) return // 判断是否支持FileReader
if (/^image/.test(file.type)) {
let reader = new FileReader()
reader.readAsDataURL(file) // 转成 base64 格式
return new Promise((resolve, reject) => { // 读取成功后的回调
reader.onloadend = function () {
let img = new Image()
img.src = this.result
// 判断图片是否大于800K,是就直接上传，反之压缩图片
if (this.result.length <= 800 * 1024) {
resolve(this.result)
} else {
img.onload = function () {
let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d')
let tCanvas = document.createElement('canvas')
let tctx = tCanvas.getContext('2d')
let width = img.width
let height = img.height
// 如果图片大于四百万像素，计算压缩比并将大小压至400万以下
let ratio
if ((ratio = (width * height) / 1000000) > 1) {
ratio = Math.sqrt(ratio)
width /= ratio
height /= ratio
} else {
ratio = 1
}
canvas.width = width
canvas.height = height
ctx.fillStyle = '#fff' // 铺底色
ctx.fillRect(0, 0, canvas.width, canvas.height)
// 如果图片像素大于100万则使用瓦片绘制
let count
if ((count = (width * height) / 1000000) > 1) {
count = ~~(Math.sqrt(count) + 1) // 计算要分成多少块瓦片
// 计算每块瓦片的宽和高
let nw = ~~(width / count)
let nh = ~~(height / count)
tCanvas.width = nw
tCanvas.height = nh
for (let i = 0; i < count; i++) {
for (let j = 0; j < count; j++) {
tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh)
ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh)
}
}
} else {
ctx.drawImage(img, 0, 0, width, height)
}
// 进行压缩(---------quailty越低 图片越小)
let quailty = 0.5
let newBase64 = canvas.toDataURL(file.type, quailty)
tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0
resolve(newBase64) // 返回压缩后的base64
}
}
}
})
}
}
}
export default imgCompressUtil
967
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
