更新记录
1.0.1(2025-03-12)
- IOS端优化插件包体积大小
1.0.0(2025-03-11)
- 全新UTS插件横空出世,同时支持
Android
、IOS
、HarmonyOS
三端 - 更多的SDK属性支持[
与原生SDK插件相比,支持更多的属性
] - 更多开放的API[
与原生SDK插件相比,开放更多的前端可调用式API
] - 欢迎大家体验,提出宝贵意见(企鹅:95-03-98-61-4)。
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.6.8,Android:5.0,iOS:11,HarmonyNext:支持 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
如需人脸识别插件请点击下方链接直达,深受广大用户青睐。如只使用插件则只有插件一次性费用,无其他费用
直达链接:https://ext.dcloud.net.cn/plugin?id=3631
插件功能概述
- 支持自定义主题颜色(包括:状态栏、导航栏背景色、识别成功时文字提示颜色、采集框识别成功颜色、提示框确认按钮颜色)
- 支持身份证正反面自动识别
- 返回图片多样化,支持返回原图、裁剪矫正过的图片、人像区域图片3种图片
可直接拿人像图片去做人脸比对,实名认证项目必备
- 支持银行卡、车辆VIN、名片正面、马来西亚身份证、车牌、驾驶证主页、驾驶证副页、行驶证主页和行驶证副页识别等,更多类型详见文档
- 支持配置是否开启相册选择识别功能
- 支持自定义超时提示内容
- 支持自定义超时时间
- 支持配置横屏或竖屏识别模式
- 支持配置手动拍照识别和扫描自动识别模式
- 支持配置是否开启复印件告警
- 支持配置是否开启边框和框内遮挡告警
- 支持配置是否开启翻拍告警
- 支持配置是否开启 PS 检测告警
- 支持配置是否开启临时身份证告警
- 支持配置是否开启身份证有效日期不合法告警
- 支持配置是否开启图片质量分数
- 支持配置是否开启反光检测
- 支持配置是否开启多卡证检测
- 支持自定义图片资源,自定义tips提示
- 支持多语言
国际化
- 支持设置相机默认倍数
UTS
- 支持选择图片时是否启用采集功能
UTS
- 支持Android/IOS/HarmonyOS
本插件为原生SDK,仅支持App端
- 更多属性、更新API详见文档
插件接入文档
关于更新
有空闲时间会不断更新维护,有问题随便提,有时间一定会修改!
特别推荐
- 【Android/IOS】百度人脸采集插件:https://ext.dcloud.net.cn/plugin?id=3631
- 【Android/IOS/HarmonyOS】银联云闪付支付插件:https://ext.dcloud.net.cn/plugin?id=21824
注意事项
- 使用该插件时一定要先试用测试,如果不会搞的可以加群(企鹅:95-03-98-61-4),群里有完整的测试demo,虚拟物品一旦购买之后无法退款!!!
准备工作
- Android、ios、harmonyOS端证书准备工作
- 1) Android端:准备应用的Android打包文件.jks文件并获取MD5。参考:https://ask.dcloud.net.cn/article/35777
- 2) IOS端:这里只简单介绍一下windows系统下如何创建ios证书,如果你是mac系统,直接百度搜索就行,网上一堆教程,windows证书申请教程参考:https://www.pianshen.com/article/59121497532/
- 3) harmonyOS端:鸿蒙打包文件及配置(
需要注意,鸿蒙需要先试用/购买插件,导入插件之后再按照链接执行
),参考:https://uniapp.dcloud.net.cn/tutorial/harmony/runbuild.html
- 腾讯OCR官方资料准备
接入步骤
最简单的接入步骤(基本10分钟搞定)
- step1:插件页右边有个
试用
的按钮,点它,然后弹出来一个模态框,选择试用的项目
,点击确认
按钮,点击继续导入HBuilderX
- step2:加入QQ群,下载对应Deom的ZIP压缩包,本插件demo为
liyahong-TencentOcr-Demo
- step3:将demo里面
index.vue
文件里面的函数方法复制过来,然后将secretId
和secretKey
替换为你的 - step4:打自定义基座包运行测试,详细操作看
详细接入步骤的第3条及以后
- step5:harmonyOS执行
准备工作
的第三条
详细接入步骤
- 点击试用插件,选择要试用的项目,获取试用资格
HarmonyOS不支持
自定义资源图片,如相册、拍照、手电筒图片等注意:SDK有默认图片,如需自定义可以按照以下步骤配置
- 1) Android端放置目录:
nativeplugins --> liyahong-TXOCR --> android --> res --> mipmap-xhdpi
- 2) IOS端放置目录:
nativeplugins --> liyahong-TXOCR --> ios --> OCRSDKImage.bundle
- 3) 自定义图片尺寸说明
- 1) Android端放置目录:
图片名称 | 建议尺寸 | 图片格式 | 说明 |
---|---|---|---|
lyh_ocr_light_off | 80*80 | png | 关闭手电筒图片 |
lyh_ocr_light_on | 80*80 | png | 打开手电筒图片 |
lyh_ocr_photo_album | 80*80 | png | 相册选择图片 |
lyh_ocr_take_pictures | 160*160 | png | 手动拍照图片 |
-
使用插件
- 1) 插件方法说明
- ocr(object) ocr文字识别方法
- clearInstance(function)释放OCRSDK资源,可以减少内存占用,建议在关闭vue页面时调用
UTS
- gotoSystemPermission()跳转应用的系统权限设置页面
UTS
Android
- compressBase64Image(object) base64图片压缩方法,可以将图片压缩到150KB以下,具体说明见下
- saveFile(object) base64数据转图片方法,可以将base64数据转换为本地图片,并返回本地路径,可以直接调用uni.uploadFile上传文件
code
码说明状态码 返回值说明 1 识别成功 -1 其他错误,如参数填写错误等 -2 权限申请被用户拒绝 Android
腾讯状态码 腾讯SDK返回的错误信息
ocr
方法说明参数说明
详见参数说明文档
callback返回参数
属性 返回值说明 code 【必填】状态码,说明见下 msg 【必填】提示信息 never 【选填】权限申请时是否选择了“拒绝且不弹出”的选项,也就是权限被永远拒绝,当 code===-2
时为必填项Android
data 【选填】腾讯返回的OCR文字提取JSON数据当 code===1
时为必填项base64Image 【选填】原图的base64数据,当 code===1
时为必填项
compressBase64Image
方法说明参数说明
属性 类型 默认值 必填 说明 base64 string 无 是 需被压缩的base64数据,不带前缀 compressSize int 150 否 期望压缩大小,单位KB callback function 无 是 结果回调 callback返回参数
属性 返回值说明 code 【必填】状态码 msg 【必填】提示信息 data 【选填】压缩结果,当code==1时必填 data
说明属性 属性说明 base64 【选填】压缩后的base64数据,不带前缀 originalSize 【选填】原图大小,单位byte compressedSize 【选填】压缩后的图片大小,单位byte
saveFile
方法说明参数说明
属性 类型 默认值 必填 说明 base64 string 无 是 需转换的base64数据,不带前缀 callback function 无 是 结果回调 返回值说明
属性 返回值说明 code 【必填】状态码 msg 【必填】提示信息 data 【选填】转换路径,当code==1时必填
- 2) 参数说明文档
Android、IOS、HarmonyOS说明只支持固定端,不写代表三端全部支持。UTS表示UTS插件新增属性
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
secretId | string | '' | 是 | 您在腾讯云后台申请的SecretId |
secretKey | string | '' | 是 | 您在腾讯云后台申请的SecretKey |
ocrType | string | idCardFront | 否 | 识别类型,详细说明见下方ocrType |
modeType | int | 0 | 否 | 识别模式,0:自动识别,1:手动拍照识别 |
themeColor | string | '' | 否 | 导航栏背景颜色Android |
navTitle | string | 身份证识别 | 否 | 导航栏文字内容Android |
showTitleBar | boolean | true | 否 | 是否显示导航栏Android |
statusBarColor | string | '#006FFF' | 否 | 状态栏背景颜色Android |
cardSuccessColor | string | '' | 否 | 识别成功时识别框四角的颜色Android、IOS |
hintTextSuccessColor | string | '' | 否 | 识别成功时识别框顶部提示文字颜色Android、HarmonyOS |
albumEnable | boolean | false | 否 | 是否开启相册选择 |
flashEnable | boolean | true | 否 | 是否显示手电筒 |
autoTimeOut | int | 10 | 否 | 自动识别超时时间,单位(秒)取值区间:5s < autoTimeOut < 180s |
dialogText | string | 识别超时,是否切换为手动拍照识别模式? | 否 | 当自动识别超时,弹窗中显示的文字内容Android、IOS |
dialogTextColor | string | '' | 否 | 当自动识别超时,弹窗中显示的文字颜色 |
showDialogTitle | boolean | true | 否 | 当自动识别超时,是否显示弹窗中的标题Android |
dialogTitleTextColor | string | '' | 否 | 当自动识别超时,弹窗中标题的文字颜色HarmonyOS |
dialogCancelText | string | 取消 | 否 | 当自动识别超时,弹窗中取消按钮文字内容Android、IOS |
dialogCancelColor | string | '' | 否 | 当自动识别超时,弹窗中取消按钮文字颜色 |
dialogConfirmText | string | 切换模式 | 否 | 当自动识别超时,弹窗中确认按钮文字内容Android、IOS |
dialogConfirmColor | string | '' | 否 | 当自动识别超时,弹窗中确认按钮的文字颜色 |
cropIdCard | boolean | false | 否 | 是否开启身份证照片裁剪 |
cropPortrait | boolean | false | 否 | 是否提取人像照片 |
copyWarn | boolean | false | 否 | 是否开启复印件告警 |
borderCheckWarn | boolean | false | 否 | 是否开启边框和框内遮挡告警 |
reshootWarn | boolean | false | 否 | 是否开启翻拍告警 |
detectPsWarn | boolean | false | 否 | 是否开启 PS 检测告警 |
tempIdWarn | boolean | false | 否 | 是否开启临时身份证告警 |
invalidDateWarn | boolean | false | 否 | 是否开启身份证有效日期不合法告警 |
quality | boolean | false | 否 | 是否开启图片质量分数 |
reflectWarn | boolean | false | 否 | 是否开启反光检测 |
multiCardDetect | boolean | false | 否 | 是否开启多卡证检测 |
isHorizontal | boolean | false | 否 | 是否开启横屏识别,设置true为横屏识别,否则为竖屏识别Android、IOS |
retBorderCutImage | boolean | false | 否 | 银行卡专用,是否返回预处理(精确剪裁对齐)后的银行卡图片数据UTS |
retCardNoImage | boolean | false | 否 | 银行卡专用,是否返回卡号的切图图片数据UTS |
enableQualityValue | boolean | false | 否 | 银行卡专用,是否返回图片质量分数(图片质量分数是评价一个图片的模糊程度的标准)UTS |
showTips | boolean | true | 否 | 是否显示扫描框下面的告警提示 |
showTipsText | string | 请避免识别内容折角、遮挡和反光 | 否 | 设置告警提示的文字内容Android、IOS |
showStatusBar | boolean | true | 否 | 是否显示状态栏Android |
language | int | 0 | 否 | 设置语言(0:简体中文 1:跟随系统 2:英文) |
ocrCameraZoom | int | 0 | 否 | 相机默认缩放倍数(0:1倍 1:1.5倍 2:2倍)Android、IOS UTS |
openClipImage | int | 0 | 否 | 选择图片时是否启用采集功能Android、IOS UTS |
showTipsIcon | boolean | true | 否 | 是否显示识别框底部tips上的icon图标Android |
showTipsBackground | boolean | true | 否 | 是否显示识别框底部tips的背景框Android |
callback | function | 无 | 否 | 识别结果回调函数UTS |
- 3) ocrType识别类型说明
Android、IOS、HarmonyOS说明只支持固定端,不写代表三端全部支持。UTS表示UTS插件新增属性
属性值 | 说明 |
---|---|
idCardFront | 身份证正面识别 |
idCardBack | 身份证反面识别 |
bankCard | 银行卡识别(卡号面,不分正反均能识别) |
businessCard | 名片卡正面识别 |
vin | 车辆的VIN识别 |
carIdCard | 车辆的车牌识别 |
driverCardFront | 驾驶证主页识别 |
driverCardBack | 驾驶证副页识别 |
vehicleCardFront | 行驶证主页识别 |
vehicleCardBack | 行驶证副页识别 |
takeVin | vin识别(手动拍照推荐使用) |
idCardHK03 | 香港身份证03版本识别 |
idCardHK18 | 香港身份证18版本识别 |
exitEntryHKMacaoCard | 港澳台通行证识别模式 |
mlidPassport | 国际护照识别 |
hmtResidentPermit | 港澳台居住证UTS |
- 4) 代码示例
import {
ocr,
compressBase64Image,
saveFile,
gotoSystemPermission,
clearInstance
} from '../../uni_modules/liyahong-tencentocr'
/**
* 开始识别
* secretId 和 secretKey获取指南
* 1、打开【https://console.cloud.tencent.com/cam/capi】,登陆账号
* 2、点击新建秘钥,然后查看secretKey,妥善保管秘钥
*/
ocr() {
// 1.使用默认样式
// txOCR.ocr({
// secretId: '您的secretId', //【必填】腾讯云控制台生成的secretId
// secretKey: '您的secretKey', //【必填】腾讯云控制台生成的secretKey
// callback: (result) => {
// switch (result.code) {
// case 1: // ocr文字提取成功
// this.resolveData(result.data)
// break
// case -2: // 权限申请被拒绝,仅Android端支持
// if (result.never) { // 是否被永远拒绝,如果被永远拒绝需要跳转设置页让用户手动开启
// this.showModal({
// title: '权限受限',
// msg: '您拒绝了一些权限,可能导致该服务无法正常使用,请前往设置!',
// confirmText: '前往设置'
// }).then(() => {
// gotoSystemPermission()
// })
// } else { // 没有永远拒绝就弹窗给予提示然后再次调用插件
// this.showModal({
// title: '权限受限',
// msg: '您拒绝了一些权限,可能导致该服务无法正常使用,请授予!'
// }).then(() => {
// this.ocr()
// })
// }
// break
// case -1: // 其他错误,如配置属性不合法等
// default:
// /**
// * 注意:
// * default返回的是ocr识别失败的错误码,此错误码与腾讯SDK保持一致
// * 详情参考:https://cloud.tencent.com/document/product/866/33528
// */
// this.ocrResult = JSON.stringify(result)
// break
// }
// }
// })
// 2.使用自定义样式
txOCR.ocr({
secretId: '', //【必填】腾讯云控制台生成的secretId
secretKey: '', //【必填】腾讯云控制台生成的secretKey
ocrType: 'idCardFront', // 选填【识别类型】默认值:idCardFront,身份证正面识别,idCardBack为身份证反面识别
modeType: 0, // 选填【识别模式】默认值:0,0:自动识别,1:手动拍照识别
themeColor: '#006FFF', // 选填【导航栏背景颜色】默认值:无
showTitleBar: true, // 选填【是否显示导航栏】默认值:true
navTitle: 'OCR识别', // 选填【导航文字内容,IOS不支持】默认值:身份证识别
statusBarColor: '#006FFF', // 选填【状态栏背景颜色】默认值:#006FFF
cardSuccessColor: '#006FFF', // 选填【识别框颜色】默认值:无,识别成功时识别框四角的颜色
hintTextSuccessColor: '#006FFF', // 选填【顶部提示文字颜色】默认值:无,识别成功时识别框顶部提示文字颜色
isHorizontal: false, // 选填【是否开启横屏识别】默认值:false
language: 0, // 选填【设置语言,0:简体中文 1:跟随系统 2:英文】默认值:0
albumEnable: true, // 选填【是否开启相册选择】默认值:false
flashEnable: true, // 选填【是否显示手电筒】默认值:true
autoTimeOut: 10, // 选填【自动识别超时时间】,单位(秒),默认值:10(取值区间:5s < autoTimeOut <= 180s),当自动识别超时会弹出是否改为拍照识别提示框
dialogText: '识别超时,是否切换识别模式!', // 选填【当自动识别超时,dialog中显示的文字内容】,默认值:识别超时,是否切换为手动拍照识别模式
dialogTextColor: '#333333', // 选填【识别超时后提示框内文字颜色】
showDialogTitle: true, // 选填【是否显示超时提示框标题】默认值:true
dialogCancelText: '取消', // 选填【识别超时后提示框取消按钮文字内容】默认值:取消
dialogCancelColor: '#333333', // 选填【识别超时后提示框取消按钮文字颜色】
dialogConfirmText: '切换模式', // 选填【识别超时后提示框确认按钮文字内容】默认值:切换模式
dialogConfirmColor: '#006FFF', // 选填【提示框确认按钮颜色】默认值:无
cropIdCard: true, // 选填【是否开启身份证照片裁剪】默认值:false,去掉证件外多余的边缘、自动矫正拍摄角度
cropPortrait: true, // 选填【是否开启人像照片裁剪】默认值:false,自动抠取身份证头像区域
copyWarn: true, // 选填【是否开启复印件告警】默认值:false
borderCheckWarn: true, // 选填【是否开启边框和框内遮挡告警】默认值:false
reshootWarn: false, // 选填【是否开启翻拍告警】默认值:false
detectPsWarn: false, // 选填【是否开启 PS 检测告警】默认值:false
tempIdWarn: false, // 选填【是否开启临时身份证告警】默认值:false
invalidDateWarn: false, // 选填【是否开启身份证有效日期不合法告警】默认值:false
quality: true, // 选填【是否开启图片质量分数】默认值:false,评价图片的模糊程度
reflectWarn: true, // 选填【是否开启反光检测】默认值:false,照片反光程度检测
multiCardDetect: true, // 选填【是否开启多卡证检测】默认值:false,多卡证检测
showTips: true, // 选填【是否显示扫描框下面的告警提示】默认值:true
showTipsText: '请避免识别内容折角、遮挡和反光', // 选填【设置告警提示的文字内容】默认值:请避免识别内容折角、遮挡和反光
showStatusBar: true, // 选填【是否显示状态栏,IOS不支持】默认值:true
showTipsIcon: true, // 选填【是否显示识别框底部tips上的icon图标】默认值:true
showTipsBackground: true, // 选填【是否显示识别框底部tips的背景框】默认值:true
retBorderCutImage: false, // 选填【银行卡专用,是否返回预处理(精确剪裁对齐)后的银行卡图片数据】默认值:false
retCardNoImage: false, // 选填【银行卡专用,是否返回卡号的切图图片数据】默认值:false
enableQualityValue: false, // 选填【银行卡专用,是否返回图片质量分数(图片质量分数是评价一个图片的模糊程度的标准)】默认值:false
ocrCameraZoom: 0, // 选填【相机默认缩放倍数】默认值:false
openClipImage: true, // 选填【选择图片时是否启用采集功能】默认值:false
callback: (result) => {
switch (result.code) {
case 1: // ocr文字提取成功
this.resolveData(result)
break
case -2: // 权限申请被拒绝,仅Android端支持
if (result.never) { // 是否被永远拒绝,如果被永远拒绝需要跳转设置页让用户手动开启
this.showModal({
title: '权限受限',
msg: '您拒绝了一些权限,可能导致该服务无法正常使用,请前往设置!',
confirmText: '前往设置'
}).then(() => {
gotoSystemPermission()
})
} else { // 没有永远拒绝就弹窗给予提示然后再次调用插件
this.showModal({
title: '权限受限',
msg: '您拒绝了一些权限,可能导致该服务无法正常使用,请授予!'
}).then(() => {
this.ocr()
})
}
break
case -1: // 其他错误,如配置属性不合法等
default:
/**
* 注意:
* default返回的是ocr识别失败的错误码,此错误码与腾讯SDK保持一致
* 详情参考:https://cloud.tencent.com/document/product/866/33528
*/
this.ocrResult = JSON.stringify(result)
break
}
}
})
},
/**
* 解析数据
* @param {string} result
*/
resolveData(result) {
let idCardReuslt = JSON.parse(result.data)
// 鸿蒙中多返回了一层,需要单独处理
if (idCardReuslt.Response) {
idCardReuslt = idCardReuslt.Response
}
let otherBase64Image = idCardReuslt.AdvancedInfo
// 确保有修正过的base64数据
if (otherBase64Image) {
otherBase64Image = JSON.parse(idCardReuslt.AdvancedInfo)
// 确保有裁剪过的图片
const idCardPhoto = otherBase64Image.IdCard
if (idCardPhoto) {
this.idCardBase64Result = idCardPhoto
}
this.base64Result = result.base64Image
// 确保有人像图片
const portraitPhoto = otherBase64Image.Portrait
if (portraitPhoto) {
this.idCardPortraitBase64Result = portraitPhoto
}
// 避免view渲染卡顿,删除base64数据
delete idCardReuslt.AdvancedInfo
}
this.ocrResult = JSON.stringify(idCardReuslt)
},
/**
* 显示弹窗提示
*/
showModal({ title, msg, confirmText }) {
return new Promise((resolve, reject) => {
uni.showModal({
title,
content: msg,
showCancel: true,
confirmText: confirmText || '确认',
success(res) {
if (res.confirm) {
resolve()
} else {
reject()
}
},
fail() {
reject()
}
})
})
}
-
4) 打自定义基座
-
5) 运行项目,开始测试(注意:
运行时建议把之前的安装包卸载!否则有可能会出现修改了无效果的情况!
),建议:如果需要上传图片到自己服务器上,建议直接上传base64数据给后端,让后端来转为图片,在前端转换图片会出现未知兼容问题。
-
注意:腾讯的状态码参考:https://cloud.tencent.com/document/product/866/33528