uniapp微信小程序调用百度OCR

news2024/10/24 4:45:15

uniapp编写微信小程序调用百度OCR
公司有一个识别行驶证需求,调用百度ocr识别
使用了image-tools这个插件,因为百度ocr接口用图片的base64
在这里插入图片描述
这里只是简单演示,accesstoken获取接口还是要放在服务器端,不然就暴露了自己的百度项目key

代码我使用了这个博主的代码
https://blog.csdn.net/sjt1010/article/details/108272945

还有需要将百度接口的地址加到微信公众平台,开发管理的服务器域名里

<template>
	<view class="cheliangjinchudengji-index">
		<view>
			<button type="primary" @click="chooseImg">行驶证拍照识别</button>
			<view style="margin-left:10px ;" v-if="imgList.length > 0">
				<view v-for="(item,index) in imgList" :key="index">
					<image :src="item" mode=""></image>
				</view>
			</view>
			
			<!-- <button type="primary" @click="getBaiduToken">token</button> -->
			
			<view v-for="item of cardatas" :key="item">
				<view>{{item}}</view>
			</view>
			
		</view>
			
	</view>
</template>

<script>
	import { pathToBase64, base64ToPath } from '../../js_sdk/mmmm-image-tools/index.js'
	import { fetchBaiduOCRDatas  } from '../../utils/basePath';
	export default {
		data() {
			return {
				  imgList: [],
				  token:'',
				  cardatas:{
					  chepai:'',
					  xinghao:''
				  }
			}
		},
		methods: {
			chooseImg(){
				let that = this;
				that.getBaiduToken();
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						// #ifdef MP-WEIXIN
						uni.getFileSystemManager().readFile({
							filePath: tempFilePaths[0],
							encoding: 'base64',
							success: r => { 
								console.log(r.data)
								let base64 = 'data:image/jpeg;base64,'  + r.data;
								that.imgList.push(base64)
								
								that.postBaiduOcr(base64);
							}
						})
						// #endif
						// // #ifdef APP-PLUS
						// pathToBase64(tempFilePaths[0])
						//   .then(base64 => {
						// 	that.imgList.push(base64)
						//   })
						//   .catch(error => {
						// 	console.error(error)
						//   })
						// // #endif
					}
				});
			},
			postBaiduOcr(imgbase64){
				let that = this;
				
				let accessToken = that.token;
				fetchBaiduOCRDatas(
				"https://aip.baidubce.com/rest/2.0/ocr/v1/vehicle_license?access_token="+accessToken, 
				{"image":imgbase64} , 
				{'content-type': 'application/x-www-form-urlencoded'}, 
				"POST", 
				res=>{
					if(res.statusCode=='200' || res.statusCode==200){
						uni.showToast({
							type: 'success',
						    title: 'OCR成功!',
						    icon: 'none',
							duration:3000
						});
						that.cardatas.chepai = res.data.words_result.号牌号码.words;
						that.cardatas.xinghao = res.data.words_result.品牌型号.words;
					}else{
						uni.showToast({
							type: 'error',
						    title:  res.data.error_description,
						    icon: 'none',
							duration:3000
						});
					}
					
				})
			},
			getBaiduToken(){
				fetchBaiduOCRDatas(
				"https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=xxxx&client_secret=xxxx", 
				{}, 
				{'Content-Type': 'application/json', 'Accept': 'application/json'}, 
				"POST", 
				res=>{
					if(res.statusCode=='200' || res.statusCode==200){
						uni.showToast({
							type: 'success',
						    title: 'token获取成功!',
						    icon: 'none',
							duration:3000
						});
					this.token = res.data.access_token	
					}else{
						uni.showToast({
							type: 'error',
						    title: res.data.error_description,
						    icon: 'none',
							duration:3000
						});
					}
					
				})
			},
			
		}
	}
</script>

<style>

</style>

const fetchBaiduOCRDatas = (url, data, header, method, callback, errCallback)=>{
  // let token = uni.getStorageSync('token');
  uni.request({
    url: url,
    data: data,
    method:method,
    header: header,
	// {
 //      'content-type': 'application/x-www-form-urlencoded'
 //    },
    success (res) {
      uni.hideLoading();
      callback(res);
    }
  })
}

在这里插入图片描述
这个行驶证图片是百度开发平台提供的图片

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2212981.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Cherno游戏引擎笔记(61~72)

---------------一些维护和更改------------- 》》》》 Made Win-GenProjects.bat work from every directory 代码更改&#xff1a; echo off->pushd ..\->pushd %~dp0\..\call vendor\bin\premake\premake5.exe vs2019popdPAUSE 为什么要做这样的更改&#xff1f; …

【C++】STL--stack

1. stack的介绍 stack的文档介绍 后进先出&#xff08;LIFO&#xff09;&#xff1a;Stack容器遵循后进先出的原则&#xff0c;即最后进入栈的元素最先被移出栈。 2.stack的使用 常用的几个接口 代码演示如下 int main() {stack<int> st;st.push(1);st.push(2);st.…

一句话木马的多种变形方式

今天来和大家聊一聊&#xff0c;一句话木马的多种变形方式。 经常有客户的网站碰到被上传小马和大马&#xff0c;这里的“马”是木马的意思&#xff0c;可不是真实的马。 通常&#xff0c;攻击者利用文件上传漏洞&#xff0c;上传一个可执行并且能被解析的脚本文件&#xff0c;…

软件测试之基础的“管理岗”

1、是否需要选择管理岗&#xff1f; 建议&#xff1a;如果个人有机会成为管理岗&#xff0c;那就抓紧了。 原因很简单&#xff0c;我认为市场的行业发展是这个样子的&#xff0c;专业化的技术人员一定是市场缺失的人才&#xff0c;但是相比较而言&#xff0c;管理者会更加被公…

实验室信息系统(LIS)源码,.Net C#语言开发C/S架构,支持DB2,Oracle,MS SQLServer等主流数据库

实验室管理信息系统LIS从属于HIS系统&#xff0c;严格意义上讲&#xff0c;它是HIS系统的一个子系统。众所周知的是&#xff0c;LIS系统的主要功能是将检验仪器传出的检验数据经分析后&#xff0c;生成检验报告&#xff0c;通过网络存储在数据库中&#xff0c;使医生能够方便、…

Adobe Photoshop 2025(PS2025版) v26.0.0.26 中文版新功能特色

Photoshop 2025 是一款图像处理软件&#xff0c;它提供了许多强大的功能和工具&#xff0c;使用户能够对图像进行编辑、调整、修复、合成和设计。 Adobe Photoshop 2025新功能特色 图像编辑&#xff1a;支持各种图像编辑功能&#xff0c;如裁剪、调整色彩、修复照片、添加滤镜…

根据指定键对自定义 JSON 输出

要根据指定键对自定义 JSON 进行输出&#xff0c;通常的做法是&#xff1a; 解析 JSON 数据。按照用户给定的键提取或排序数据。重新构造并输出 JSON 数据。 这里有几个常见的场景&#xff1a; 提取特定键及其值。按特定键排序 JSON 数组。过滤掉不需要的键。 接下来&#…

华为FreeBuds 6i开降噪后底噪声大该如何解决?

华为FreeBuds 6i开了降噪会有沙沙的底噪声&#xff1f;最近看到一些小伙伴说这款耳机降噪效果比较好&#xff0c;但有时候在安静的环境下可以听到沙沙的底噪声&#xff0c;这是怎么回事&#xff1f; 我们先来聊一下降噪的原理&#xff1a;耳机内部的降噪系统通过麦克风采集外界…

智慧园区防护系统——提升园区安全性的关键工具

伴随着城市现代化推进&#xff0c;智慧园区已经成为当代城市基本建设不可或缺的一部分。智慧园区综合服务管理系统软件也被视为园区安全高效的关键工具之一。本文将从智慧园区安全性系统设计、作用、运用等多个方面详细的表述与分析。 一、设计 智慧园区防护系统设计方案应依据…

AI帮你读取总结数百个页面,AI搜索——未来的搜索引擎

AI搜索 引言实践测试kimi测试智谱测试 思考总结 引言 之前OpenAI O1刚上线时&#xff0c;就已称模型在使用COT思维链进行推理和自我反思后可以大大提升模型能力。最近Kimi和智谱都在内侧推出了AI搜索&#xff0c;使用下来感觉效果非常炸裂。AI通过COT思维链拆解你的问题 快速…

云原生后端技术:构建高可靠、可扩展的现代应用

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

iPhone变身健康卫士,假期作息紊乱不再怕

由于长假&#xff0c;许多人的作息时间表可能已经完全被打乱。晚上熬夜追剧、白天睡到自然醒&#xff0c;这样的生活虽然惬意&#xff0c;但对我们的身体健康却是个不小的挑战。幸运的是&#xff0c;iPhone手机内置的一系列健康功能&#xff0c;可以帮助我们重新找回规律的生活…

布隆过滤器原理及优缺点详解!

文章目录 引言工作原理示例展示优缺点优点缺点 使用场景总结 引言 布隆过滤器&#xff08;Bloom Filter&#xff09;是一种概率型数据结构&#xff0c;用于判断一个元素是否属于一个集合。它特别擅长处理大规模数据的快速查找&#xff0c;具有高效的空间利用率和查询速度。下面…

Flutter应用解析(一)

1、创建项目 1.1 新建 1.2 选择Flutter SDK的位置 1.3 项目名称 英文单词加下划线起名规范&#xff0c;其他默认即可。 1.4 点击运行 发生报错显示我们的JAVA版本不符合 1.5 更改版本设置 1.6 再次启动项目 2、分析页面代码 以下是lib/main.dart的源代码&#xff08;为了阅…

论文中如何引用羲和的气象数据呢?

最近许多小伙伴在问“论文中使用了羲和能源气象大数据平台的数据&#xff0c;该怎么引用?”今天来给大家解答一下羲和的数据是否可靠以及在论文中的引用格式该如何表示。 羲和数源&#xff1a; 由南京图德科技有限公司自主研发&#xff0c;与美国国家航天局(NASA)、欧洲中期天…

Kubernetes最全详解,这真得收藏

号主&#xff1a;老杨丨11年资深网络工程师&#xff0c;更多网工提升干货&#xff0c;请关注公众号&#xff1a;网络工程师俱乐部 上午好&#xff0c;我的网工朋友 随着云计算的快速发展&#xff0c;容器技术成为了现代软件开发不可或缺的一部分。容器化技术&#xff0c;尤其是…

基于Asp.Net的校园报修信息系统的设计与实现---附源码54880

内容摘要 在当今数字化校园的背景下&#xff0c;为了提高校园报修管理的效率和便捷性&#xff0c;设计并实现了一个基于 Asp.Net 的校园报修信息系统。该系统旨在解决传统报修方式中存在的繁琐、低效和不及时等问题&#xff0c;为师生提供一个快速、准确、可靠的报修平台。 本系…

three.js 实现一个心形的着色器

three.js 实现一个心形的着色器 源链接&#xff1a;https://z2586300277.github.io/three-cesium-examples/#/codeMirror?navigationThreeJS&classifyshader&idheartShader 国内站点预览&#xff1a;http://threehub.cn github地址: https://github.com/z258630027…

天若OCR识别软件 使用教程 软件下载

F4&#xff08;FnF4&#xff09;快捷键打开软件&#xff0c;找到要识别的图片&#xff0c;直接选中要识别的区域&#xff0c;可直接识别出来。 如果识别失败&#xff0c;就在右键菜单里&#xff0c;重新识别

数据管理,数据治理,数据中心,数据中台,数据湖都是什么意思,有什么关系?

这些术语都与数据管理和处理相关&#xff0c;但它们各自关注的方面不同。下面我将逐一解释这些概念&#xff0c;并简要说明它们之间的关系。 数据管理 (Data Management) 数据管理是指规划、控制和提供数据及信息资产的过程。它包括了数据的获取、验证、存储、保护以及加工等一…