前言

近年来，随着车辆保有量的不断增加，行驶证识别已经成为了一个备受关注的问题。基于百度云的 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_tokenrequest({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); //图片base64params.append("access_token", token); //access_tokenrequest.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 = thisif (!file || !window.FileReader) return // 判断是否支持FileReaderif (/^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.widthlet height = img.height// 如果图片大于四百万像素，计算压缩比并将大小压至400万以下let ratioif ((ratio = (width * height) / 1000000) > 1) {ratio = Math.sqrt(ratio)width /= ratioheight /= ratio} else {ratio = 1}canvas.width = widthcanvas.height = heightctx.fillStyle = '#fff' // 铺底色ctx.fillRect(0, 0, canvas.width, canvas.height)// 如果图片像素大于100万则使用瓦片绘制let countif ((count = (width * height) / 1000000) > 1) {count = ~~(Math.sqrt(count) + 1) // 计算要分成多少块瓦片// 计算每块瓦片的宽和高let nw = ~~(width / count)let nh = ~~(height / count)tCanvas.width = nwtCanvas.height = nhfor (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.5let newBase64 = canvas.toDataURL(file.type, quailty)tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0resolve(newBase64) // 返回压缩后的base64}}}})}}
}
export default imgCompressUtil

拓展

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

一键识别行驶证：vue基于百度云智能实现轻松上手相关推荐

python百度云ocr文字识别软件_基于百度云的OCR识别（Python）
2019年7月3日早上,在百度AI开发者大会上,一个来自山西的青年,将一瓶矿泉水浇在了同样来自山西的李彦宏身上. 可以回顾一下 https://b23.tv/av57665929/p1 ,着实让人一惊 ...
微信小程序基于百度云实现图文识别（胎教级教程）
前言最近开发微信小程序用到了图文识别的功能,刚开始还觉得很难,但其实配合一些第三方api接入,实现这个功能还是很简单的,下面我们一起来看看要怎么实现这个小功能吧. 1.首先我们需要注册一个百度云账号 ...
Ocr 图文识别技术——基于百度云OCR技术学习与总结
Ocr 图文识别技术--基于百度云OCR技术学习与总结 1.百度智能云控制台 ...
基于百度云通过Python实现简单的营业执照识别
先前在做图像文字识别这个需求的时候发现到百度云提供的SDK有一些有趣的小功能,提供了一些接口能实现身份证.银行卡.驾驶证.行驶证等图像识别,都尝试着玩了一下,发现营业执照的问题比较多,就以此为例简单写 ...
使用百度云智能SDK和树莓派搭建简易的人脸识别系统 Python语言版
硬件树莓派4B一个 CSI摄像头一个笔者使用的是树莓派4B和CSI摄像头,但是树莓派3和USB摄像头等相似设备均可. 百度云智能设置 Step 1 登录百度云智能网址https://cloud ...
《Python自动化》学习笔记:百度云智能进行文字识别(代码干货)
# encoding:utf-8 # 利用百度云智能的资源进行文字识别 import requests import base64 from tkinter import filedialog,Tk ...
基于百度云人脸识别API与opencv的人脸识别系统
基于百度云人脸识别API与opencv的人脸识别系统简介弄这个东西是因为参加了学校的项目,第一次开发做的不是很好. 本系统是基于百度云人脸识别API.opencv级联器.PYQT5进行开发.百度云 ...
JAVA基于百度云文字(车牌、身份证、图片)识别提取
基于百度云文字(车牌.身份证.图片)识别提取由于自己想写一个停车场项目,所以去查询了百度API文档,可以实现所有图片中文字的提取,此贴为傻瓜式教程,希望所有像我一样的初学者都可以看懂,有所收获,话不 ...
基于百度云主机的USDP 2.x 安装详细教程
基于百度云主机的USDP 2.x 安装详细教程 1. USDP 简介 UCloud Smart Data Platform(简称 USDP),是 UCloud 推出的云上智能化.轻量级的大数据基础 ...

一键识别行驶证：vue基于百度云智能实现轻松上手

前言

实现效果

实现思路

实现代码

拓展

一键识别行驶证：vue基于百度云智能实现轻松上手相关推荐

最新文章

热门文章