体验地址,微信搜索小程序:叉烧包打狗二队
这篇文章主要记录了,我制作文字识别小程序的过程和方法
基础设置
app.js 全局配置文件
{
"pages": [
"pages/word/word",
"pages/wordcloud/wordcloud",
"pages/plant/plant",
"pages/index/index",
"pages/usualImage/usualImage",
"pages/animal/animal",
"pages/wine/wine",
"pages/jingdian/jingdian",
"pages/shucai/shucai"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "叉烧包打狗",
"navigationBarTextStyle": "black"
},
//底部栏 list至少需要两个
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "识别",
"iconPath": "../miniprogram/images/im1.png",
"selectedIconPath": "../miniprogram/images/im1.png"
},
{
"pagePath": "pages/index/index",
"text": "还是识别",
"iconPath": "../miniprogram/images/user-unlogin.png",
"selectedIconPath": "../miniprogram/images/user-unlogin.png"
}
]
},
"sitemapLocation": "sitemap.json",
"style": "v2"
}
文字识别 页面
1、创建word 文件夹 并加入 page文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2pnuEl0r-1622432647651)(
)]
2、修改word.wxml
<!-- 文字识别 百度接口调用 -->
<view class="pages">
<view class="face">
<image src="{{image}}" mode="widthFix"></image>
</view>
</view>
<view class="result">
<text>识别结果</text>
<text id="result-text">复制</text>
</view>
<view class="words">
<block wx:for='{{words}}'>
<view class="aitext">{{item.words}}</view>
</block>
</view>
<view class="btn">
<button type="primary" bindtap="wordImage">选择图片</button>
</view>
3、修改word.wxss
/* pages/word/word.wxss */
.pages{background: #0c5ebd;}
.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: #0a6ad8;margin: 0 35rpx;overflow-y: auto;}
.aitext{font-size: 15px;}
.btn{position: fixed;bottom: 5rpx;width: 100%;}
.btn button{width: 350rpx;
border-radius: 70rpx;}
word.js 核心
分析
这个小程序的文字识别,是基于百度文字识别 api 的调用
百度文字识别文档:https://ai.baidu.com/ai-doc/OCR/1k3h7y3db
代码分析过程:
- 在本地获取一张图片
- 上传到百度
- 百度获取到图片解析
- 返回文字结果
- 将文字结果渲染到word.wxml
api 调用分析
由接口文档知:
- HTTP 方法:
POST
- 请求URL: https://aip.baidubce.com/rest/2.0/ocr/v1/accurate_basic
- URL参数:access_token
- access_token :通过 API Key和Secret Key获取的access_token
- 最后一个箭头可知请求的格式
access_token 的获取
由文字调用文档可知,调用接口需要获取 access_token 值
access_token 文档:https://ai.baidu.com/ai-doc/REFERENCE/Ck3dwjhhu
如何发送请求:
- 授权服务地址:https://aip.baidubce.com/oauth/2.0/token
- 推荐使用POST
- 需要获取 两个必须参数: API Key 和 Secret Key
- url 的书写格式:‘https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=’ + ‘API Key’ + ‘&client_secret=’ + ‘Secret Key’ + ‘&’,
API Key 和 Secret Key的获取
申请并登录
获取值
access_token 返回值:
- access_token: 要获取的Access Token
- expires_in: Access Token的有效期(秒为单位,一般为1个月)
代码:
wx.request({
//发送请求
url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=' + 'fnuWqC5YeWzllFVcL7GpajCK' + '&client_secret=' + 'AFKv8uS5aDvXbcDP6iF73zGTZPLDlwE7' + '&',
header: {
'content-type': 'application/json'
},
success:(res)=> {
console.log('结果',res)
// this.userInfo.token = res.data.access_token
//获取结果token的值
const access_token = res.data.access_token
console.log('请求:',access_token)
}
)}
api 调用
//解析图片 并调用百度识别接口
wx.getFileSystemManager().readFile({
filePath: tempFilePaths,
encoding: 'base64',
success : (res) =>{
// console.log('请求测试',access_token)
// console.log('图片测试',res)
wx.request({
url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/accurate_basic'+'?access_token='+access_token,
method: 'POST',
data: {
//图片的格式
image:res.data,
detectorId: 0
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: res=>{
console.log('结果测试:',res.data.words_result)
var word = res.data.words_result
this.setData({
//渲染到界面
words:word
})
}
})
}
})
如此就可以识别出图片中的文字