人工智能微信小程序之识别图片上的文字并提取出来（附源码）

1.新建springboot项目

1.1首先引入百度人工智能的jar：

        <!-- 百度人工智能 --><dependency><groupId>com.baidu.aip</groupId><artifactId>java-sdk</artifactId><version>4.4.1</version></dependency>

1.2获取所需的AppID、APIKey、SecretKey:

访问网址：https://ai.baidu.com/，百度AI主页去注册一个百度账号，如果你有了百度云账号，可以直接进入到控制台里面去，创建一个应用，创建成功后，会分配给你一个应用信息，包含AppID ,API Key,Secret Key,这些是你调用人脸识别API的凭证，妥善保管

1.3新建REST风格的接口

package com.example.demo.controller;import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.baidu.aip.face.AipFace;
import com.baidu.aip.ocr.AipOcr;
import lombok.var;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;@RestController
public class OCRcontroller {//接口申请免费，请自行申请使用，如果学习使用可以用下public static final String APP_ID = "XXXXX";public static final String API_KEY = "XXXXXXXXXXXXX";public static final String SECRET_KEY = "XXXXXXXXXXXXXXX";static AipOcr client = null;static {client = new AipOcr(APP_ID, API_KEY, SECRET_KEY);// 可选：设置网络连接参数//建立连接的超时时间（单位：毫秒）client.setConnectionTimeoutInMillis(2000);//通过打开的连接传输数据的超时时间（单位：毫秒）client.setSocketTimeoutInMillis(60000);}@PostMapping(value = "/ocr")public String OCRDistinguish(HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws Exception{try {MultipartHttpServletRequest req = (MultipartHttpServletRequest) request;//对应前端的upload的name参数"file"MultipartFile multipartFile = req.getFile("file");// 参数为二进制数组byte[] buf = multipartFile.getBytes();HashMap<String, String> options = new HashMap<String, String>();options.put("language_type", "CHN_ENG");options.put("detect_direction", "true");options.put("detect_language", "true");options.put("probability", "true");JSONObject Jsonobject = new JSONObject();var res = client.basicGeneral(buf, options);System.out.println(res);return res.toString();}catch (Exception ex){ex.printStackTrace();}return null;}}

1.4百度人脸识别返回的数据

检测成功：

{"log_id": 5192090783630053081,"words_result": [{"probability": {"average": 0.999279,"min": 0.998333,"variance": 0},"words": "Hadoop的组成"}, {"probability": {"average": 0.997712,"min": 0.990979,"variance": 9.0E-6},"words": "包括两个核心组成"}, {"probability": {"average": 0.996236,"min": 0.967005,"variance": 5.8E-5},"words": "HDFS:分布式文件系统,存储海量的数据"}, {"probability": {"average": 0.984576,"min": 0.885068,"variance": 7.82E-4},"words": "Mapreduce:并行处理框架,实现任务分解和调度"}],"words_result_num": 4,"language": -1,"direction": 0
}

检测失败：

{"log_id": 2579470816374033529,"words_result": [],"words_result_num": 0,"language": -1,"direction": 3
}

2.微信小程序开发

2.1index.wxml

<!--图片区域-->
<view class='pages'><view class='face'><image src='{{images}}' mode='widthFix'></image></view>
</view><!--识别结果-->
<view class='result'>
<text>识别结果</text>
<text id='result-text' bindtap='copy' wx:if='{{characterend}}'>复制</text>
</view><!--识别文字-->
<view class='words' wx:if='{{characterend}}'><view class='aitext'>{{resulttext}}</view>
</view>
<view wx:else>{{resulttext}}
</view><!--上传按钮-->
<view class='btn'><button type='primary' bindtap='wordImage'>上传按钮</button>
</view>

2.2index.js

.pages{background: #c9d0d8}
.face{background: white;height: 500rpx;margin: 0 35rpx;text-align: center;overflow: hidden;}
.face image{width: 500rpx;height: 500rpx;}/*识别结果*/
.result{display:flex;justify-content: space-between;padding:35rpx;}
.result text{font-size: 30rpx;color: #00a4ff}
#result-text{background: blueviolet;padding: 0 20rpx; color: white;}/*识别到的文字*/
.words{height: 470rpx;background: #c9d0d8;margin: 0 35rpx;overflow-y: 15px;
}
.aitext{font-size: 15px;}/*上传图片*/
.btn{position: fixed;bottom: 5rpx;width: 100%;
}
.btn button{width: 350rpx;border-radius: 70rpx;}

2.3index.wxss

//index.js
//获取应用实例
const app = getApp()Page({data: {images: [],//动画开关animation: false,//识别的文字resulttext:[],characterend:false},//从选择本地图片wordImage:function(){wx.chooseImage({count:1,sizeType:['original','compressed'],sourceType:['album','camera'],success: (res)=> {var tempFilePaths = res.tempFilePathsconsole.log(tempFilePaths)this.setData({images:tempFilePaths,animation: true})wx.uploadFile({url: 'http://localhost:9900/ocr',filePath: tempFilePaths[0],name: 'file',success:(res)=>{animation:false;var wordresult = [];var datas = JSON.parse(res.data)if (datas.words_result_num ==0){this.setData({characterend: false,resulttext: "图片没有识别到文字",})}else{for (var i = 0; i < datas.words_result.length; ++i){wordresult += datas.words_result[i].words+'\n';}this.setData({characterend: true,resulttext: wordresult,})}}})},})},//复制copy:function(){wx.setClipboardData({data: this.data.resulttext,success: (res)=> {// 添加下面的代码可以复写复制成功默认提示文本`内容已复制` wx.showToast({title: '复制成功',duration: 3000})wx.getClipboardData({success: (res)=> {console.log(res)}})}})}})

3.系统界面图

下载地址：https://download.csdn.net/download/u013938578/12192883

人工智能微信小程序之识别图片上的文字并提取出来（附源码）相关推荐

微信小程序：修复图片音频全新升级带特效喝酒神器源码
这是一款全新升级带特效喝酒神器小游戏微信小程序源码小编发现很多喝酒神器小程序都不带特效和音效的感觉差了那么一点意思而且感觉也不炫酷所以小编今天给大家带来一款带特效,音效炫酷的喝酒神器该款神器由 ...
传图取字：微信小程序自动把图片上的文字提取出来
生活工作中有时我们喜欢图片或者纸质文档上的一段文字,这些文字重新输入,又费时费力?? 今天小编给大家分享一款微信小程序[传图取字],高精度自动识别图片.文档及PPT中的文字,一键提取并能复制和分享,从 ...
Springboot+基于微信小程序的电器商城系统的设计与实现毕业设计-附源码251453
Springboot电器商城小程序的开发摘要近年来,随着移动互联网的快速发展,电子商务越来越受到网民们的欢迎,电子商务对国家经济的发展也起着越来越重要的作用.简单的流程.便捷可靠的支付方式.快捷 ...
springboot基于微信小程序的运动软件前端的设计与实现毕业设计-附源码100932
基于Springboot的运动软件小程序摘要现今,越来越的多人喜欢跑步,骑行等运动,各种运动类型的应用软件也应运而生.本项目从社交与运动结合的方面入手,让用户能与好友分享自己跑步的心得要领与成绩, ...
微信小程序之多列表的显示和隐藏功能【附源码】
效果图: 实现思路: 实现单个列表的显示和隐藏应该使用唯一元素让程序知道你应该显示和隐藏哪个列表项,可以用数据的id: css中定义一个hidden{display:none}控制显示和隐藏,然后通过 ...
(微信小程序毕业设计)小学生语文学习打卡项目开发实例(附源码+论文)
大家好!我是岛上程序猿,感谢您阅读本文,欢迎一键三连哦.
微信图片自动上传到服务器,微信小程序怎样使图片上传至服务器
这次给大家带来微信小程序怎样使图片上传至服务器,微信小程序使图片上传至服务器的注意事项有哪些,下面就是实战案例,一起来看一下.-wxml 发布项目 /**选择图片 */ choose: functio ...
微信小程序如何把图片上传至服务器
微信小程序如何把图片上传至服务器前些日子接了个任务就是开发一个小程序,遇到了一个问题就是需要图片上传至服务器并保存记录,遵循着解决思路我们先从最开始入手 1:微信上传接口 2:服务器接收接口 3:保 ...
微信小程序开发之文件上传下载应用场景（附Demo源码）
微信小程序开发之文件上传下载应用场景(附Demo源码),Demo为小相册应用,源码在附件中,本示例需要腾讯云支持. http://www.henkuai.com/forum.php?mod=viewt ...

人工智能微信小程序之识别图片上的文字并提取出来（附源码）

1.新建springboot项目

2.微信小程序开发

3.系统界面图

人工智能微信小程序之识别图片上的文字并提取出来（附源码）相关推荐

最新文章

热门文章