Cordova使用百度OCR插件实现图像识别

1. 下载aip.license文件

1.1 注册登录百度智能云
网址: https://login.bce.baidu.com/ 
有账户直接登录 没有的话注册一个再登录
登录后 左侧菜单 >点开 查看所有服务 找到其中的图像识别
这个布局是不一定的 以后说不定会变 但是意思是一样的 找到图像识别即可

找到图片识别即可

1.2 进入图像识别 应用列表的页面
1.2.1  点击创建应用
1.2.2  填写信息
	   应用名称:随意 不重复就好
	   应用类型:也随意 看自己应用的类型选就好了
	   文字识别包名:就是cordova中config.xml中widget里的id 复制粘贴即可
	   应用描述:随便描述一下就好了
	   接口选择: 根据自己的需求进行选择  如:

在这里插入图片描述

1.2.3 点击立即创建 即可创建成功
1.3 进入应用详情页面
点击应用名或者管理进入应用详情页面

在这里插入图片描述

点击下载aip.license按钮进行下载

在这里插入图片描述

2. 配置Cordova

2.1 将aip.license移动到Cordova项目中
// 比较推荐第一种方式 比较简单 
安卓:将 aip.license 放到 app/src/main/assets 目录下
ios:将 aip.license 放到项目根目录下

// 或

// src为 aip.license原本存储的位置 即从项目根目录出发 找到aip.license文件 将aip.license放到根目录比较好找
// target为需要将aip.license复制到哪去 target不要改 
// 安卓和ios的位置是不一样的
<platform name="android">
    // 这是aip.license放在根目录的情况
	<resource-file src="aip.license" target="app/src/main/assets/aip.license" />
</platform>
<platform name="ios">
    // 这是aip.license放在根目录的情况
	<resource-file src="aip.license" target="aip.license" />
</platform>
2.2 安装 cordova-baidu-ocr 插件
cordova plugin add cordova-baidu-ocr

3. 编写代码

3.1 HTML部分
<button id="scanner">识别图像</button>
3.2 JS部分
document.addEventListener('deviceReady',function(){
	// 初始化
	// 初始化完成之后才可以识别 执行的是识别成功的回调函数
    // 初始化完成之前不可以识别 执行的是识别失败的回调函数
    // 也就是说 等弹出初始化完成之后点 也可以将识别的方法写在初始化成功的回调函数中
     BaiduOcr.init(
         ()=>{
             console.log('初始化完成');
         },
         (error)=>{
             console.log('初始化失败')
         })
    // 识别身份证
    document.getElementById('scanner').onclick=function(){
    	// 接收三个参数(配置参数对象{},成功回调函数,失败回调函数)
        BaiduOcr.scanId(
            {
            	// IDCardFront识别正面  IDCardBack识别背面
                contentType:"IDCardFront",
                // nativeEnable和nativeEnableManual 默认是true读取本地图片
                // 这里改成false 即 使用相机拍摄图片
                nativeEnable:false,
                nativeEnableManual:false
            },
            (result)=>{
            	// result为识别的结果
                alert(JSON.stringify(result));
            },
            (error)=>{
                console.log(error)
            });
    }
})
3.3 识别其他图像的方法
// 识别银行卡
BaiduOcr.scanBankCard({}, (result)=>{
        console.log(JSON.stringify(result));
    },
    (error)=>{
        console.log(JSON.stringify(error));
    });
// 这里是安卓和苹果都支持的方法
// 用法都是一致的 BaiduOcr.xxx({},successCallback,failCallback) 举一反三即可 
// 这里就罗列一下方法名即可
// scanVehicleLicense(识别行驶证)   scanDrivingLicense(识别驾驶证)
// scanLicensePlate(识别车牌)       scanBusinessLicense(识别营业执照)
// scanReceipt(识别通用票据)   

// 安卓额外支持的方法
// scanPassport(护照)
// scanNumbers(数字)
// scanQrCode(二维码)
// scanBusinessCard(名片)
// scanHandWriting(手写)
// scanLottery(彩票)
// scanVatInvoice(增值税发票)      

3.4 可在使用完之后进行销毁 别还没用完就销毁了
// 销毁本地控制模型
BaiduOcr.destroy(
        ()=>{
            console.log('销毁成功');
        },
        (error)=>{
            console.log(error)
        });

4. 运行

4.1 cordova build android
先构建一下项目
4.2 cordova run android
构建完运行项目
总结:这个官方写的不是很详细 基本一笔带过 在学习的过程中踩了好多坑 写个笔记留个纪念 说不定哪天就用上了 踩坑不易 觉得有所帮助 可以点个赞呗
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章