1.申请支付宝开发者平台申请ocr开放功能,获得provider
2. 在支付宝开发者平台查看原生ocr使用的代码示例 文档的地址:小程序文档 - 支付宝文档中心
3. 在app.config.js中使用
//app.config.js 来引入插件
plugins = {
ocr: {
version: "*",
provider: "20********78316", //插件的标识
},
};
。。。。
。。。。
。。。。
export default {
pages,
subpackages: subpackages,//分包
plugins: plugins,//插件
window: {
backgroundTextStyle: "light",
navigationBarBackgroundColor: "#fff",
navigationBarTitleText: "XXX",
navigationBarTextStyle: "black",
},
};
4.使用支付宝原生代码编写ocr识别页面
//index.axml
<view >
<!-- pages/ocr/ocr.axml -->
<ocr-id
type="{{type}}"
title="{{ocrTitle}}"
onComplete="onCompleteOcr"
imageOutput="{{imageOutput}}"
/>
</view>
//index.js
// pages/ocr/ocr.js
import Taro from "@tarojs/taro";
Page({
data: {
type: "avatar", //type参数为”emblem“,或”avatar“
imageOutput: "roi", //imageOutput参数为“global”或者“roi”
ocrTitle: "请把身份证人像面放置在取像框",
},
onLoad() {
// console.info(`Page onLoad with query: ${JSON.stringify(query)}`);
// const { type } = query;
// this.setData({ type });
},
onCompleteOcr(data) {
console.info("result=====>", JSON.stringify(data.result[0].body));
let pages = Taro.getCurrentPages(); // 获取当前的页面栈
let prevPage = pages[pages.length - 2]; // 获取上一页面
let body = data.result[0].body;
prevPage.setData({
//设置上一个页面的值
resultocr: body,
});
Taro.navigateBack({
delta: 1, //表示回到上一页面
});
},
});
//index.json
{
"defaultTitle": "身份证件号码识别",
"usingComponents": {
"ocr-id": "plugin://ocr/ocr-id" //支付宝ocr识别插件地址
}
}
5. 在需要的界面直接调用插件即可
//跳转ocr界面
jump({
url: "/pages/ocr-alipay/index",
payload: {
text: "OCR",
},
});
//ocr识别成功获取数据
componentDidShow() {
if (isALIPAY) {
let pages = Taro.getCurrentPages();
let currPage = pages[pages.length - 1]; // 获取当前页面
console.log("======currPage.data=========", currPage.data);
var body = currPage.data.resultocr;
console.log("======ocr返回=========", body);
var that = this;
if (Array.isArray(body)) {
console.log("======ocr返回=========", body[0]);
if (body[0]) {
Taro.showModal({
title: "确认信息",
content: "姓名:" + body[0].name + "\n 身份证号:" + body[0].num,
confirmText: "确认",
confirmColor: "#4b9df9",
cancelText: "重新识别",
cancelColor: "#4b9df9",
showCancel: true, //是否显示取消按钮
success(res) {
if (res.confirm || res.errMsg === "confirm") {
that.setState({
djxmstr: body[0].name,
djzjhmstr: body[0].num,
});
currPage.setData({
//设置上一个页面的值
resultocr: "",
});
} else {
currPage.setData({
//设置上一个页面的值
resultocr: "",
});
jump({
url: "/pages/ocr-alipay/index",
payload: {
text: "OCR",
},
});
}
},
});
}
}
}
}
结语:创作不易,请多多支持!