一、準備工作
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 })
三、效果展示
