1.百度云开发注册与配置
https://console.bce.baidu.com/ai/?_=1610696616923#/ai/ocr/app/create
首先需要注册百度账号,并登录百度云,进入管理控制台,创建文字识别应用,如下图
创建完应用后,打开应用管理可见APP_ID、API_KEY、SECRET_KEY,需要用在小程序端调用文字识别接口。
2.下载文字识别api
首先在电脑安装nodejs,然后打开cmd进入项目的根目录 ,输入命令:npm install baidu-aip-sdk,下载完成后,可在 node_modeules 文件夹看见 baidu-aip-sdk
3.建立云函数
打开微信开发者工具,在云函数目录下新建conf.js用来存放APP_ID、API_KEY、SECRET_KEY
在index.js粘贴以下代码:
// 云函数入口文件
const cloud = require('wx-server-sdk')
let AipOcrClient = require("baidu-aip-sdk").ocr;
const args = require("config.js");
cloud.init({
env: 'wxcloud2021-3g********4e', //填写自己的环境ID
traceUser: true
});
// 云函数入口函数
exports.main = async (event, context) => {
// 设置APPID/AK/SK
let APP_ID = args.APP_ID;
let API_KEY = args.API_KEY;
let SECRET_KEY = args.SECRET_KEY;
// 新建一个对象,保存一个对象调用服务接口
let client = new AipOcrClient(APP_ID, API_KEY, SECRET_KEY);
let fileID = event.fileID;
let res = await cloud.downloadFile({
fileID: fileID,
})
let image = res.fileContent.toString("base64");
// 调用通用文字识别, 图片参数为远程url图片
return client.generalBasic(image);
// console.log(result);
// .then(function (result) {
// let result = JSON.stringify(result);
// return result;
// })
}
4.前端代码
<template>
<view>
<view class="box">
<button class="btn" type="primary" @click="textOcr">选择小于3M的图片</button>
</view>
<scroll-view class='textbox' scroll-y="true" >
<textarea v-model="text1" maxlength="-1" auto-height="true" />
</scroll-view>
<view class="box2">
<button class="btn2" type="primary" @click="copyAll">复制全部</button>
<button class="btn2" type="primary" @click="clearAll">清空全部</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
text1: ''
}
},
methods: {
//文字识别
textOcr() {
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album','camera'],
success: (res) => {
let filePath = res.tempFilePaths[0]
let fileSize = res.tempFiles[0].size
console.log(fileSize)
if (fileSize > 3000000) { //大于3m
wx.showToast({
title: '图片不能大于3M',
icon: 'none',
duration: 2000
})
return
} else {
uni.showLoading({
title: '处理中...'
})
wx.cloud.uploadFile({
filePath: filePath, // 本地文件路径
cloudPath: 'ocrImages/'+Date.now() + '.jpg', //保存在云端的路径及文件名(这里以时间戳命名)
success: (res) => {
let fileID = res.fileID //云端返回的fileID
wx.cloud.callFunction({ //调用云函数
name: 'textOcr',
data: {
fileID: fileID
},
success:(res) => {
let result = res.result.words_result //云端返回的结果
if (result.length > 0) {
let arr = []
for (let i = 0; i < result.length; i++) {
arr += result[i].words + "\n" // 这个"\n"功能是换行
}
//console.log(arr)
this.text1 = arr
}else{
console.log('空')
}
},
fail: (err) => {
console.log(err)
},
complete:() => {
uni.hideLoading()
}
})
},
fail:(err) => {
console.log(err)
}
})
}
}
})
},
copyAll() {
let that = this
wx.setClipboardData({
data: that.text1,
success: (res) => {
wx.showToast({
title: '复制成功',
icon: 'success'
})
}
})
},
clearAll() {
this.text1 = ''
}
}
}
</script>
<style>
.box{
display: flex;
width: 98%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.btn{
margin: 10px;
width: 200px;
}
.textbox{
width: 94%;
height: 900rpx;
border: 1rpx;
border-style: solid;
margin-left: 10px;
}
textarea{
width: 98%;
margin-left: 3px;
}
.box2{
display: flex;
width: 98%;
flex-direction: row;
align-items: center;
justify-content: center;
}
.btn2{
margin: 10px;
width: 100px;
}
</style>
效果图: