微信小程序云开发-云存储的应用-识别通用印刷体
一、准备工作
1、创建云函数identify
2、云函数identify中index.js代码
- 1 // 云函数入口文件
- 2 const cloud = require('wx-server-sdk')
- 3
- 4 //cloud.init()
- 5 //环境变量初始化
- 6 cloud.init({
- 7 evn:cloud.DYNAMIC_CURRENT_ENV //标志当前所在环境
- 8 })
- 9
- 10 // 云函数入口函数
- 11 exports.main = async (event,context) => {
- 12 const wxContext = cloud.getWXContext()
- 13 if(event.action=="1"){ //action为1 返回身份证的信息
- 14 try {
- 15 const result = await cloud.openapi.ocr.idcard({
- 16 "type": 'photo',
- 17 "imgUrl": event.imgUrl
- 18 })
- 19 return result
- 20 } catch (err) {
- 21 return err
- 22 }
- 23 }else if(event.action=="2"){ //action为2 返回银行卡的信息
- 24 try {
- 25 const result = await cloud.openapi.ocr.bankcard({
- 26 "type": 'photo',
- 27 "imgUrl": event.imgUrl
- 28 })
- 29 return result
- 30 } catch (err) {
- 31 return err
- 32 }
- 33 }else if(event.action=="3"){ //action为3 返回驾驶证的信息
- 34 try {
- 35 const result = await cloud.openapi.ocr.driverLicense({
- 36 "type": 'photo',
- 37 "imgUrl": event.imgUrl
- 38 })
- 39 return result
- 40 } catch (err) {
- 41 return err
- 42 }
- 43 }else if(event.action=="4"){ //action为4 返回行驶证的信息
- 44 try {
- 45 const result = await cloud.openapi.ocr.vehicleLicense({
- 46 "type": 'photo',
- 47 "imgUrl": event.imgUrl
- 48 })
- 49 return result
- 50 } catch (err) {
- 51 return err
- 52 }
- 53 }else if(event.action=="5"){ //action为5 返回营业执照的信息
- 54 try {
- 55 const result = await cloud.openapi.ocr.businessLicense({
- 56 "imgUrl": event.imgUrl
- 57 })
- 58 return result
- 59 } catch (err) {
- 60 return err
- 61 }
- 62 }else if(event.action=="6"){ //action为6 返回通用印刷体的信息
- 63 try {
- 64 const result = await cloud.openapi.ocr.printedText({
- 65 "imgUrl": event.imgUrl
- 66 })
- 67 return result
- 68 } catch (err) {
- 69 return err
- 70 }
- 71 }
- 72 }
二、创建页面并写相应代码
创建页面IdentifyPrintedText,用于OCR识别通用印刷体
1、IdentifyPrintedText.wxml
- 1 <!-- 识别通用印刷体信息 -->
- 2 <button bindtap="IdentifyPrintedText" type="primary">识别通用印刷体</button>
- 3 <!-- 把识别到的通用印刷体图片显示到页面上 -->
- 4 <view class="idcard">
- 5 <image src="{{IdentifyPrintedTextURL}}" ></image>
- 6 </view>
- 7 <!-- 把识别到的通用印刷体信息显示到页面上 -->
- 8 <view class="front" wx:if="{{showdPrintedText}}">
- 9 <view wx:for="{{PrintedTextMsg.items}}" wx:key="index" class="con">{{item.text}}</view>
- 10 <view class="imgSize">【图片大小】:{{PrintedTextMsg.imgSize.w}}*{{PrintedTextMsg.imgSize.h}}</view>
- 11 </view>
2、IdentifyPrintedText.wxss
- 1 button{
- 2 margin: 20rpx;
- 3 }
- 4 .front{
- 5 margin: 20rpx;
- 6 }
- 7
- 8 .idcard{
- 9 text-align: center;
- 10 }
- 11 .idcard image{
- 12 width: 95%rpx;
- 13 height: 600rpx;
- 14 }
- 15 .imgSize{
- 16 margin-top: 100rpx;
- 17 }
3、IdentifyPrintedText.js
- 1 // pages/IdentifyDriverLicense/IdentifyDriverLicense.js
- 2 Page({
- 3 //初始化数据
- 4 data:{
- 5 showdBusinessLicense:false,
- 6 BusinessLicenseMsg:{}
- 7 },
- 8
- 9 //识别驾驶证信息
- 10 IdentifyPrintedText(){
- 11 //选择图片
- 12 wx.chooseImage({
- 13 count: 1,
- 14 sizeType: ['original', 'compressed'],
- 15 sourceType: ['album', 'camera'],
- 16 }).then(res=>{
- 17 console.log("图片选择成功",res);
- 18 console.log("所选图片的临时链接",res.tempFilePaths[0]);
- 19 //上传图片
- 20 wx.cloud.uploadFile({
- 21 cloudPath: (new Date()).valueOf()+'.png',
- 22 filePath: res.tempFilePaths[0],
- 23 }).then(res=>{
- 24 console.log("图片上传到云存储成功",res);
- 25 console.log("图片在云存储里的fileID",res.fileID);
- 26 //将上传成功的图片显示到页面上
- 27 this.setData({
- 28 IdentifyPrintedTextURL:res.fileID,
- 29 })
- 30 //获取图片真实URL
- 31 wx.cloud.getTempFileURL({
- 32 fileList:[res.fileID]
- 33 }).then(res=>{
- 34 console.log("获取图片真实链接成功",res);
- 35 //识别身份证背面信息
- 36 wx.cloud.callFunction({
- 37 name:"identify",
- 38 data:{
- 39 imgUrl:res.fileList[0].tempFileURL, //传递参数给云函数
- 40 action:"6" //action为1表示身份证,2表示银行卡,3表示驾驶证,4表示行驶证,5表示营业执照,6表示通用印刷体(在云函数中自定义的)
- 41 }
- 42 }).then(res=>{
- 43 console.log("图片识别成功",res);
- 44 this.setData({
- 45 PrintedTextMsg:res.result,
- 46 showdPrintedText:true
- 47 })
- 48 }).catch(err=>{
- 49 console.log("图片识别失败",err);
- 50 })
- 51 }).catch(err=>{
- 52 console.log("获取图片真实链接失败",err);
- 53 })
- 54 }).catch(err=>{
- 55 console.log("图片上传到云存储失败",err);
- 56 })
- 57
- 58 }).catch(err=>{
- 59 console.log("图片选择失败",err);
- 60 })
- 61 }
- 62 })
三、效果展示
版权声明:本文为AnnLing原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。