更新记录

1.0.1(2025-03-12)

  • IOS端优化插件包体积大小

1.0.0(2025-03-11)

  • 全新UTS插件横空出世,同时支持AndroidIOSHarmonyOS三端
  • 更多的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详见文档

插件接入文档

关于更新

有空闲时间会不断更新维护,有问题随便提,有时间一定会修改!

特别推荐

注意事项

  • 使用该插件时一定要先试用测试,如果不会搞的可以加群(企鹅:95-03-98-61-4),群里有完整的测试demo,虚拟物品一旦购买之后无法退款!!!

准备工作

  1. Android、ios、harmonyOS端证书准备工作
  2. 腾讯OCR官方资料准备
    • 1) 进入腾讯云后台官网点击这里
    • 2) 登陆腾讯云账号(没有的自行注册,注意:如果是公司项目使用,请让公司申请账号,除非你愿意将你的账号上缴给公司)
    • 3) 选择最下面的访问秘钥 --> API秘钥管理 --> 新建秘钥 --> 复制SecretId 和 SecretKey,妥善保管好
    • 4) ocr接口收费一览表点击这里

接入步骤

最简单的接入步骤(基本10分钟搞定)

  • step1:插件页右边有个试用的按钮,点它,然后弹出来一个模态框,选择试用的项目,点击确认按钮,点击继续导入HBuilderX
  • step2:加入QQ群,下载对应Deom的ZIP压缩包,本插件demo为liyahong-TencentOcr-Demo
  • step3:将demo里面index.vue文件里面的函数方法复制过来,然后将secretIdsecretKey替换为你的
  • step4:打自定义基座包运行测试,详细操作看详细接入步骤的第3条及以后
  • step5:harmonyOS执行准备工作的第三条

详细接入步骤

  1. 点击试用插件,选择要试用的项目,获取试用资格
  2. HarmonyOS不支持自定义资源图片,如相册、拍照、手电筒图片等注意:SDK有默认图片,如需自定义可以按照以下步骤配置
    • 1) Android端放置目录:nativeplugins --> liyahong-TXOCR --> android --> res --> mipmap-xhdpi
    • 2) IOS端放置目录:nativeplugins --> liyahong-TXOCR --> ios --> OCRSDKImage.bundle
    • 3) 自定义图片尺寸说明
图片名称 建议尺寸 图片格式 说明
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. 使用插件

    • 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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

Android 1.使用相机权限:android.permission.CAMERA 2.文件存储权限:android.permission.WRITE_EXTERNAL_STORAGE 3.访问文件权限:android.permission.READ_EXTERNAL_STORAGE <br/> IOS 1.使用相机权限:NSCameraUsageDescription 2.相册访问权限:NSPhotoLibraryUsageDescription <br/> HarmonyOS 1.使用相机权限:ohos.permission.CAMERA 2.相册访问权限:ohos.permission.READ_MEDIA 3.文件写入权限:ohos.permission.WRITE_MEDIA

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件使用的腾讯云OCR文字识别SDK会采集数据,用于文字识别功能,详情可参考:https://cloud.tencent.com/document/product/866

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问