投稿
  1. 极客之音首页
  2. 技术随笔

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

小半 • • 技术随笔 • 阅读 216

导读：本篇文章讲解 vue基于百度云实现行驶证识别，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

前言

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

实现效果

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";
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

拓展

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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79357.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！