vue基于百度云实现行驶证识别
Posted 水星记_
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue基于百度云实现行驶证识别相关的知识，希望对你有一定的参考价值。
前言
图文识别相信大家都不陌生，它能够通过手机的拍照或者选择手机相册图片进行智能识别，识别出来的文字可以智能根据图片文字段落进行排版，应用提供复制识别内容和保存内容功能便于使用识别出来的内容，今天教大家在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
拓展
有关于在微信小程序中如何实现识别功能的，大家可移步博主另一篇文章 微信小程序基于百度云实现图文识别（胎教级教程）
以上是关于vue基于百度云实现行驶证识别的主要内容，如果未能解决你的问题，请参考以下文章