利用周末时间开发一个简单的图片文字识别小程序应用,虽然简单也是经历个很多个坑,把爬坑经过分享给大家,希望对你有帮助
微信小程序 -> 搜索 -> 快速识别文字
- 服务端 - 购买域名、服务器、搭建后台开发接口
- 学习小程序官方开发文档
一、先来几张效果图
识别结果:
直接上代码,贴出主要的代码段
主界面xml:
<!--pages/my.wxml-->
<view>
<view class="my_container">
<image class="my_ocr_image" src="../../imgs/bg_index_top.jpg" mode="aspectFill"></image>
<text wx:if="{{false}}" class="repeat-text" bindtap="repeatParse">重新解析</text>
<label class="my_ocr_head">请选取图片进行文字提取</label>
<view class="ctrl-container">
<van-button bind:click="pickMessageImage" class="ctrl_btn" color="#F3E73A" type="info" customStyle="color:#000;" plain>聊天记录选图</van-button>
<van-button bind:click="pickImage" color="#F3E73A" class="ctrl_btn" customStyle="color:#000;" plain>相册选图/拍照</van-button>
</view>
</view>
<view wx:if="{{ isShowGuide }}" class="guide-container">
<image class="guide_image" src="../../imgs/guide_img.jpg"></image>
<van-button bind:click="hideGuide" class="guide_text" color="#F3E73A" type="info" customStyle="border-radius: 20px;color:#fff;background-color: rgba(255, 255, 255, 0);margin-top:10px;" plain>我知道了</van-button>
</view>
</view>
选取聊天记录和相册拍照的js代码
//选取聊天记录的图片
pickMessageImage: function() {
var self = this
wx.chooseMessageFile({
count: 1,
type: 'image',
success(res) {
console.log(JSON.stringify(res))
if (res.tempFiles.length > 0) {
self.parseImage(res.tempFiles[0].path)
}
},
fail() {
}
})
},
//选取相册图片或拍照
pickImage: function() {
var self = this
wx.getSetting({
success(res) {
//获取摄像头权限
if (res.authSetting['scope.camera']) {
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
console.log('success:' + JSON.stringify(res))
if (res.tempFiles.length > 0) {
self.parseImage(res.tempFiles[0].path)
}
},
fail: function(res) {
console.log('fail:' + JSON.stringify(res))
},
complete: function(res) {
},
})
} else {
wx.navigateTo({
url: '/pages/permiss/permiss',
})
}
},
fail(err) {
wx.navigateTo({
url: '/pages/permiss/permiss',
})
}
})
扫码体验:
QQ小程序体验: