文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

uniapp 前端实现文字识别,身份证识别,营业执照识别 (兼容APP、H5、小程序 不需要任何SDK)

2023-08-17 08:17

关注

前言

本文将介绍如何使用uniapp和百度AI开放平台的OCR(光学字符识别)API实现身份证、营业执照等卡证的识别和文字识别功能。

兼容说明

APP小程序H5

准备工作

1. 注册百度账号
  1. 前往百度AI开放平台官网,点击“登录”。使用百度账号登录,如果没有可以先注册百度账号。
  2. 登录成功后,点击右上角的“开发者服务”->“API 服务”。
2. 进入开发者平台,创建OCR文字识别应用
  1. 在AI能力服务类目中选择“OCR文字识别”,进入文字识别产品的应用页。
  2. 点击“立即使用”,进入OCR文字识别应用创建页。
3. 获取AppID和AK
  1. 输入应用名称,选择应用类型为“公开应用”或“私有应用”,填写验证码后点击“创建应用”。
  2. 应用创建成功把对应的client_id和client_secret保存好添加到项目里

图片转base64(兼容APP、H5、小程序)

新建一个js文件导出toBase64函数

将图片文件路径转为base64格式

const toBase64 = (path) => {return new Promise((resolve, reject) => {// #ifdef APP-PLUSplus.io.resolveLocalFileSystemURL(path, (entry) => {entry.file((file) => {let fileReader = new plus.io.FileReader()fileReader.readAsDataURL(file)fileReader.onloadend = (evt) => {let base64 = evt.target.result.split(",")[1]resolve(base64)}})})// #endif// #ifdef H5uni.request({url: path,responseType: 'arraybuffer',success: (res) => {resolve(uni.arrayBufferToBase64(res.data))}})// #endif// #ifdef MP-WEIXINuni.getFileSystemManager().readFile({filePath: path,encoding: 'base64',success: (res) => {resolve(res.data)}})// #endif})}export {toBase64}

具体代码

1. 在data里声明申请好的秘钥
data() {return {dataObj: {client_id: '填你自己的',client_secret: '填你自己的',}}},
2. 声明接受参数dataType,用于判断需要识别的类型
props: {dataType: {type: String,default: 'idcard',}},
3. 选择本地图片

使用uni.chooseImage()选择需要识别的图片:

// 选择本地图片chooseImage() {let self = thisuni.chooseImage({count: 1,success: (ress) => {uni.showLoading({title: '正在识别中...'})// 下面将图片本地路径转base64convert.toBase64(ress.tempFilePaths[0]).then((res) => {self.getAccessToken(res, ress)})},fail(err) {uni.hideLoading()console.log(err)}})},
4. 获取AccessToken

调用相应的识别接口
根据需要识别的卡证类型,调用不同的OCR识别接口,传入图片base64和token进行识别:

请求百度AI开放平台的token接口,获取后续接口的访问凭证:

getAccessToken(path, ress) {let self = thisuni.request({url: 'https://aip.baidubce.com/oauth/2.0/token',data: {grant_type: 'client_credentials',client_id: self.dataObj.client_id,client_secret: self.dataObj.client_secret},method: 'POST',header: {'Content-Type': 'application/x-www-form-urlencoded'},success: (res) => {if (self.dataType == 'idcard') {self.uploadImage(path, res.data.access_token, ress)} else {self.uploadlicense(path, res.data.access_token, ress)}uni.hideLoading()},fail(err) {uni.hideLoading()console.log(err)}})},
5.通用文字识别(高精度版)
uploadImage(path, token) {uni.request({url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/accurate_basic',data: {image: path,access_token: token},method: 'POST',header: {'Content-Type': 'application/x-www-form-urlencoded'},success: (res) => {this.$emit('end', {animal: false,words: res.data.words_result})}})},
6. 身份证识别:

正反面都可以使用这个,请求返回内容不一样。

// 身份证识别uploadImage(path, token, ress) {let self = thisuni.request({url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard',data: {image: path,access_token: token,id_card_side: 'back'},method: 'POST',header: {'Content-Type': 'application/x-www-form-urlencoded'},success: (res) => {uni.hideLoading()self.$emit('end', {path: ress,animal: false,words: res.data})},fail(err) {uni.hideLoading()console.log(err)}})},
7. 营业执照:
// 营业执照识别Business licenseuploadlicense(path, token, ress) {let self = thisuni.request({url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/business_license',data: {image: path,access_token: token,},method: 'POST',header: {'Content-Type': 'application/x-www-form-urlencoded',},success: (res) => {uni.hideLoading()self.$emit('end', {path: ress,animal: false,words: res.data})},fail(err) {uni.hideLoading()console.log(err)}})},
8. 通用文字识别:
// 通用文字识别(高精度版)uploadImage(path, token) {uni.request({url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/accurate_basic',data: {image: path,access_token: token},method: 'POST',header: {'Content-Type': 'application/x-www-form-urlencoded'},success: (res) => {this.$emit('end', {animal: false,words: res.data.words_result})}})},
9. 组件html部分代码

结语

以上就是uniapp使用百度AI平台OCR API实现卡证识别和文字识别的整体实现过程全部内容了,有不懂的,或者我代码有误的地方,希望大家多多交流。具体详细代码示例可以私信问我要哈!

来源地址:https://blog.csdn.net/2303_76218115/article/details/131367847

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯