OCR身份证识别

app.json

@@ -14,8 +14,8 @@
             "pages": [
                 "pages/index/index",
                 "pages/confirm/confirm",
-                "pages/deposit/deposit"
+                "pages/deposit/deposit",
-
+                "pages/OCR/OCR"
             ]
         },
         {
@@ -86,9 +86,5 @@
         "chooseLocation"
     ],
     "plugins": {
-        "ocr-plugin": {
-            "version": "3.1.3",
-            "provider": "wx4418e3e031e551be"
-        }
     }
 }

ocr.js

@@ -0,0 +1,36 @@
+
+
+export const ocrAction = async (filePath) => {
+  wx.showLoading({
+    title: '正在处理',
+  })
+
+  // TODO 将 tempFilePath 上传到 CDN 得到 url
+  let img_url = 'http://192.168.1.144:9000/mzjzf/身份反.jpg'
+  // 实现上传到 cdn 的代码, 将得到的 url 写到 img_url 中
+
+  // 调用服务市场接口 https://fuwu.weixin.qq.com/service/detail/000ce4cec24ca026d37900ed551415
+  try {
+    await wx.serviceMarket.invokeService({
+      api: 'OcrAllInOne',
+      service: 'wx79ac3de8be320b71',
+      data: {
+        img_url,
+        data_type: 3,
+        ocr_type: 1, // 详细见文档
+      }
+    })
+    wx.hideLoading()
+  } catch (e) {
+    wx.hideLoading()
+    throw e
+  }
+}
+
+export const takePhoto = async (tempFilePath) => {
+  if(tempFilePath){
+    return ocrAction(tempFilePath)
+  } 
+  const filePath = await chooseImage()
+  return ocrAction(filePath)
+}

pages/index/index.js

@@ -20,6 +20,7 @@ Page({
       },
       {
         name: "入住办理",
+        url:'/subpages/OCRCard/pages/index/index'
       },
       {
         name: "退房确认",
@@ -49,6 +50,11 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
+    wx.login({
+      success: (res) => {
+        console.log('微信CODE：：：：',res);  
+      },
+    })
     this.setData({
       statusHeight: app.globalData.deviceInfo.statusHeight,
     });

pages/index/index.wxml

@@ -1,7 +1,7 @@
-<view style="top: {{statusHeight}}px;color:#ffffff;padding-left:30rpx" class="header-search flex items-center">
+<!-- <view style="top: {{statusHeight}}px;color:#ffffff;padding-left:30rpx" class="header-search flex items-center">
     <view>青岛</view>
     <van-search value="{{ searchValue }}" shape="round" background="transparent" placeholder="请输入搜索关键词" />
-</view>
+</view> -->
 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style="height:480rpx">
     <block wx:for="{{imgUrls}}">
         <swiper-item>

project.config.json

@@ -20,7 +20,7 @@
         "ignore": [],
         "include": []
     },
-    "appid": "wxaf87b420b87e2d79",
+    "appid": "wx00dbd91a119d3b91",
     "editorSetting": {
         "tabIndent": "insertSpaces",
         "tabSize": 4

project.private.config.json

@@ -1,5 +1,5 @@
 {
-    "libVersion": "development",
+    "libVersion": "3.8.6",
     "projectname": "epmet-apartment-mp",
     "setting": {
         "urlCheck": false,
@@ -14,6 +14,13 @@
     "condition": {
         "miniprogram": {
             "list": [
+                {
+                    "name": "OCR",
+                    "pathName": "subpages/OCRCard/pages/OCR/OCR",
+                    "query": "",
+                    "scene": null,
+                    "launchMode": "default"
+                },
                 {
                     "name": "subpages/index/checkOutConfirm/index/index",
                     "pathName": "subpages/index/checkOutConfirm/index/index",

subpages/OCRCard/pages/OCR/OCR.js

@@ -0,0 +1,212 @@
+import {
+    ocrAction,
+  } from '../../../../ocr.js'
+  
+  const chooseImage = async () => {
+    return new Promise((resolve, reject) => {
+      wx.chooseMedia({
+        count: 1,
+        sizeType: ['original','compressed'],
+        sourceType: ['album'],
+        mediaType:['image'],
+        success: (res) => {
+          console.log(res);
+          resolve(res.tempFiles[0].tempFilePath)
+        },
+        fail: (res) => {
+          reject(new Error(`选择图片失败: ${res.errMsg}`))
+        }
+      })
+    })
+  }
+  
+  Page({
+    data: {
+      title: '身份证识别',
+      skipphotoStatus: "0",
+      flash: true,
+      bottom: 125,
+      windowWidth: 300,
+      touchPadding: 36,
+      windowHeight: 200,
+      isShowImage: true,
+      showCamera: false,
+      path: '',
+      cameraAuth: true,
+      top: 386,
+      left: 24,
+      width: 666,
+      height: 464
+    },
+    onLoad(opt) {
+      wx.setNavigationBarTitle({
+        title: this.data.title
+      })
+      this.initData()
+    },
+    showTool() {
+      this.setData({
+        showCamera: true
+      })
+    },
+    error(e) {
+      console.log('camera加载失败')
+      this.setData({
+        cameraAuth: false
+      })
+    },
+    handleSetting() {
+      // 对用户的设置进行判断，如果没有授权，即使用户返回到保存页面，显示的也是“去授权”按钮；同意授权之后才显示保存按钮
+      if (!e.detail.authSetting['scope.camera']) {
+        wx.showModal({
+          title: '',
+          content: '若不打开授权，则无法拍照！',
+          showCancel: false
+        })
+      } else {
+        this.setData({
+          cameraAuth: true
+        })
+      }
+    },
+    initData() {
+      wx.getSystemInfo({
+        success: res => {
+          const ios = !!(res.system.toLowerCase().search('ios') + 1)
+          const model = res.model >= 'iPhone X'
+          let rate = res.windowHeight < 800 ? (res.windowHeight - 110) / 698 : 1
+          let bottom = this.data.bottom * rate
+          let globalStatusBarHeight = res.statusBarHeight ? res.statusBarHeight * 2 : 0
+          let top = (this.data.top + globalStatusBarHeight)
+          let temp = ((top - globalStatusBarHeight) * rate - 88 - 48 - 60)
+          if (temp < 20) {
+            top = (60 + 20 + 88 + 48) / rate + globalStatusBarHeight
+            bottom = bottom - (20 - temp) * rate
+          }
+          this.setData({
+            globalStatusBarHeight: globalStatusBarHeight,
+            globalIos: true,
+            bottom: bottom,
+            touchPadding: this.data.touchPadding * rate,
+            top: top * rate,
+            height: (this.data.height * rate / 4) * 4,
+            windowWidth: res.windowWidth,
+            windowHeight: res.windowHeight,
+          })
+        },
+      })
+    },
+    
+    //改变是是否闪光
+    changeFlash() {
+      this.setData({
+        flash: !this.data.flash
+      })
+    },
+    goPre() {
+      wx.navigateBack({
+        delta: 1
+      })
+    },
+    async chooseImg(e) {
+      chooseImage()
+        .then(ocrAction)
+        .catch(e => {
+          console.error(e)
+          console.error('因为没有真的上传图片，所以走到出错的逻辑里了')
+          wx.showToast({
+            title: '出错啦...',
+            icon: 'error'
+          })
+        }) 
+    },
+    takePhotoAction(e) {
+      this.setData({
+        isShowImage: true,
+      })
+      const ctx = wx.createCameraContext()
+      ctx.takePhoto({
+        quality: 'high', //高质量
+        success: (res) => {
+          this.loadTempImagePath(res.tempImagePath);
+        },
+      })
+    },
+    cancel() {
+      wx.navigateBack()
+      if (this._cb) {
+        this._cb(this._callbackId, 'cancel')
+      }
+    },
+    loadTempImagePath(filePath) {
+      let that = this
+      let {
+        windowWidth,
+        windowHeight
+      } = this.data
+      let rate = windowWidth / 375
+      let image_x = (that.data.left / 2) * rate;
+      let image_y = ((that.data.top / 2)) * rate;
+      let image_width = (375 - 2 * that.data.left / 2) * rate;
+      let image_height = (that.data.height / 2) * rate;
+      // (image_height < 700) && (image_height > 380) && (image_height = 380)
+      wx.getImageInfo({
+        src: filePath,
+        success(res) {
+          that.canvas = wx.createCanvasContext("image-canvas", that)
+          //过渡页面中，图片的路径座标和大小
+          that.canvas.drawImage(filePath, 0, 0, that.data.windowWidth, that.data.windowHeight)
+          wx.showLoading({
+            title: '数据处理中...',
+            icon: 'loading',
+            duration: 10000
+          })
+          // 这里有一些很神奇的操作,总结就是MD拍出来的照片规格居然不是统一的过渡页面中，对裁剪框的设定
+          that.canvas.setStrokeStyle('rgba(0, 0, 0, 0)')
+          that.canvas.strokeRect(image_x, image_y, image_width, image_height)
+          that.canvas.draw()
+          setTimeout(function () {
+            wx.canvasToTempFilePath({ //裁剪对参数
+              canvasId: "image-canvas",
+              x: image_x, //画布x轴起点
+              y: image_y, //画布y轴起点
+              width: image_width, //画布宽度
+              height: image_height, //画布高度
+              destWidth: image_width, //输出图片宽度
+              destHeight: image_height, //输出图片高度
+              success: function (res) {
+                that.setData({
+                  image: res.tempFilePath,
+                  isShowImage: false
+                })
+                wx.hideLoading()
+                ocrAction(res.tempFilePath)
+                  .then((result) => {
+                    that.success(result)
+                  })
+                  .catch((e) => {
+                    that.setData({
+                      isShowImage: true
+                    })
+                    console.error('因为没有真的上传图片，所以走到出错的逻辑里了')
+                    wx.showToast({
+                      title: '出错啦...',
+                      icon: 'loading'
+                    })
+                  }) 
+              },
+              fail: function (e) {
+                wx.showToast({
+                  title: '出错啦...',
+                  icon: 'loading'
+                })
+              }
+            });
+          }, 1000);
+        }
+      })
+    },
+    success(e) {
+      console.error('success', e)
+    },
+  })

subpages/OCRCard/pages/OCR/OCR.json

@@ -0,0 +1,3 @@
+{
+    "navigationStyle": "custom"
+  }

subpages/OCRCard/pages/OCR/OCR.wxml

@@ -0,0 +1,113 @@
+<view style="width:750rpx;height:100vh">
+    <!-- 这是背景遮罩 -->
+    <canvas wx:if='{{isShowImage}}' canvas-id="image-canvas" style='position:fixed;top:0rpx;width:{{windowWidth}}px; height:{{windowHeight}}px;'></canvas>
+    <camera wx:if="{{cameraAuth}}" flash="{{flash ? 'on' : 'off'}}" bindinitdone="showTool" mode="normal" device-position="back" binderror="error" style="position:fixed;top:0rpx;width: 100%; height: 100vh;">
+        <cover-view wx:if="{{showCamera}}" style="display: flex; height: 100vh; flex-direction: column;">
+            <cover-view style="height:{{top}}rpx;" class="header bg-cover">
+            </cover-view>
+            <cover-view class="main-container">
+                <cover-view style="height: {{height}}rpx;" class="container-center">
+                </cover-view>
+                <cover-view style="flex: 0 0 {{left}}px;" class="container-left bg-cover"></cover-view>
+                <cover-view style="flex: 0 0 {{left}}px;" class="container-right bg-cover"></cover-view>
+            </cover-view>
+            <cover-view class="footer bg-cover">
+            </cover-view>
+        </cover-view>
+        <cover-view wx:if="{{showCamera}}" style="position:fixed; top:0rpx; display: flex; height: 100vh; flex-direction: column;">
+            <cover-view style="height:{{top}}rpx;" class="header">
+                <!-- <cover-view wx:if="{{!cameraAuth}}"><Button bindopensetting='handleSetting' style="color:#000" open-type="openSetting">开启摄像头授权</Button></cover-view> -->
+                <cover-view style="padding-top:{{globalStatusBarHeight}}rpx" class="title"> {{title}}</cover-view>
+                <cover-image wx:if="{{cameraAuth}}" bindtap="changeFlash" style="margin-top:60rpx" class="flash btn-click" src="../../image/{{flash ? 'ScanCode_Flash@3x' : 'ScanCode_FlashClose@3x'}}.png"> </cover-image>
+            </cover-view>
+            <cover-view class="main-container">
+                <cover-view wx:if="{{cameraAuth}}" style="height: {{height}}rpx;" class="container-center">
+                    <cover-view class="column">
+                        <cover-image class="frame" src="../../image/ScanCode_Frame.png"> </cover-image>
+                        <cover-image style="transform: rotate(90deg);" class="frame" src="../../image/ScanCode_Frame.png"> </cover-image>
+                    </cover-view>
+                    <cover-view class="bottom-column">
+                        <cover-image style="transform: rotate(270deg);" class="frame" src="../../image/ScanCode_Frame.png"> </cover-image>
+                        <cover-image style="transform: rotate(180deg);" class="frame" src="../../image/ScanCode_Frame.png"> </cover-image>
+                    </cover-view>
+                </cover-view>
+                <cover-view wx:else style="height: {{height}}rpx;" class="no-authwording bg-cover">
+                    <!-- <button style="line-height: 45px;height:45px; padding-left: 14px;padding-right: 14px" type="default" open-type="openSetting" bindopensetting='handleSetting' >点击授权 </button> -->
+                    <cover-view style="position:relative; top:-45px;" class="touch-wording">暂无权限访问摄像头，请去小程序设置中授权打开摄像头</cover-view>
+                </cover-view>
+                <cover-view style="flex: 0 0 {{left}}px;" class="container-left"></cover-view>
+                <cover-view style="flex: 0 0 {{left}}px;" class="container-right"></cover-view>
+            </cover-view>
+            <cover-view class="footer">
+                <cover-view wx:if="{{cameraAuth}}" class="frame-wording">拍摄要求：清晰完整，避免缺边、模糊、反光。</cover-view>
+                <!-- <cover-view class="touch-wording">轻触拍照</cover-view> -->
+                <cover-view class="tool-container">
+                    <!-- <cover-view wx:if="{{cameraAuth}}" style="margin-bottom: {{touchPadding}}px" class="touch-wording">轻触拍照</cover-view> -->
+                    <cover-view class="img-container">
+                        <cover-image bindtap="goPre" class="close tool-icon btn-click" src="../../image/ScanCode_Close@3x.png"> </cover-image>
+                        <cover-image  bindtap="takePhotoAction" class="cam tool-icon btn-click" src="../../image/ScanCode_Cam@3x.png"> </cover-image>
+                        <!-- <button style="line-height: 45px;height:45px; padding-left: 14px;padding-right: 14px" type="default" open-type="openSetting" bindopensetting='handleSetting' >点击授权 </button> -->
+                        <cover-image bindtap="chooseImg" class="pic tool-icon btn-click" src="../../image/ScanCode_Pic@3x.png"> </cover-image>
+                    </cover-view>
+                    <cover-view style="height: {{bottom}}px" class="tool-blank"></cover-view>
+                </cover-view>
+            </cover-view>
+            <!-- <cover-view ></cover-view> -->
+        </cover-view>
+    </camera>
+    <cover-view wx:if='{{!isShowImage}}' class="show-img">
+        <cover-view style="display: flex; height: 100vh; flex-direction: column;">
+            <cover-view style="height:{{top}}rpx;" class="header">
+            </cover-view>
+            <cover-view class="main-container">
+                <cover-view style="height: {{height}}rpx;" class="container-center">
+                    <cover-image class="photo" src="{{image}}"></cover-image>
+                </cover-view>
+                <cover-view style="flex: 0 0 {{left}}px;" class="container-left"></cover-view>
+                <cover-view style="flex: 0 0 {{left}}px;" class="container-right"></cover-view>
+            </cover-view>
+            <cover-view class="footer">
+            </cover-view>
+            <!-- <cover-view ></cover-view> -->
+        </cover-view>
+    </cover-view>
+    <view wx:if="{{!cameraAuth}}" style="position:fixed;top:0rpx;width: 100%; height: 100vh;background-color: #7f7f7f">
+        <view style="display: flex; height: 100vh; flex-direction: column;">
+            <view style="height:{{top}}rpx;" class="header">
+            </view>
+            <view class="main-container">
+                <view style="height: {{height}}rpx;" class="container-center">
+                </view>
+                <view style="flex: 0 0 {{left}}px;" class="container-left"></view>
+                <view style="flex: 0 0 {{left}}px;" class="container-right"></view>
+            </view>
+            <view class="footer">
+            </view>
+        </view>
+        <view style="position:fixed; top:0rpx; display: flex; height: 100vh; flex-direction: column;">
+            <view style="height:{{top}}rpx;" class="header">
+                <!-- <view wx:if="{{!cameraAuth}}"><Button bindopensetting='handleSetting' style="color:#000" open-type="openSetting">开启摄像头授权</Button></view> -->
+                <view style="padding-top:{{globalStatusBarHeight}}rpx" class="title"> {{title}}</view>
+            </view>
+            <view class="main-container">
+                <view style="position:relative; top:-45px;" class="touch-wording">暂无权限访问摄像头，请点击下方按钮设置权限</view>
+            </view>
+            <view style="text-align: center; width: 750rpx; position:relative; top:-25px;">
+                <button type="primary" style="width: 90px" open-type="openSetting">设置</button>
+            </view>
+            <view class="footer">
+                <view class="tool-container">
+                    <!-- <view wx:if="{{cameraAuth}}" style="margin-bottom: {{touchPadding}}px" class="touch-wording">轻触拍照</view> -->
+                    <view class="img-container">
+                        <image bindtap="goPre" class="close tool-icon btn-click" src="../../image/ScanCode_Close@3x.png"> </image>
+                        <image  bindtap="takePhotoAction" class="cam tool-icon btn-click" src="../../image/ScanCode_Cam@3x.png"> </image>
+                        <!-- <button style="line-height: 45px;height:45px; padding-left: 14px;padding-right: 14px" type="default" open-type="openSetting" bindopensetting='handleSetting' >点击授权 </button> -->
+                        <image bindtap="chooseImg" class="pic tool-icon btn-click" src="../../image/ScanCode_Pic@3x.png"> </image>
+                    </view>
+                    <view style="height: {{bottom}}px" class="tool-blank"></view>
+                </view>
+            </view>
+            <!-- <view ></view> -->
+        </view>
+    </view>
+</view>

subpages/OCRCard/pages/OCR/OCR.wxss

@@ -0,0 +1,214 @@
+.bg {
+    display: flex;
+    /* position: fixed; */
+    top: 0;
+    height: 100vh;
+  }
+  
+  .bg-cover {
+    background-color: #000;
+    opacity: 0.3;
+  }
+  
+  .title {
+    width: 750rpx;
+    height: 88rpx;
+    line-height: 70rpx;
+    color: #fff;
+    font-size: 34rpx;
+    text-align: center;
+  }
+  
+  .flash {
+    width: 24px;
+    height: 24px;
+    margin-left: 24px;
+  }
+  
+  /** flex布局 **/
+  .main-container {
+    display: flex;
+  }
+  
+  .footer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    flex: 1;
+  }
+  
+  .container-center {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: space-between;
+    flex: 1;
+  }
+  
+  .no-authwording {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: center;
+    flex: 1;
+  }
+  
+  .container-left,
+  .container-right {
+    flex: 0 0 12px;
+  }
+  
+  .container-left {
+    order: -1;
+  }
+  
+  .column {
+    flex-basis: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+  
+  .bottom-column {
+    flex-basis: 100%;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+  }
+  
+  .close {
+    justify-content: flex-start;
+  }
+  
+  .pic {
+    justify-content: flex-end;
+  }
+  
+  .tool-icon {
+    align-items: center;
+  }
+  
+  .cam {
+    justify-content: center;
+  }
+  
+  .frame {
+    display: inline-block;
+    width: 32rpx;
+    height: 32rpx;
+  }
+  
+  .right-frame {
+    float: right;
+  }
+  
+  .bottom-tool {
+    /* width: 100%; */
+    padding: 0rpx 42rpx;
+    position: fixed;
+    bottom: 225rpx;
+    display: flex;
+    flex-direction: row;
+    margin-top: 6rpx;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .tool-container {
+    flex-basis: 100%;
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: column;
+    align-items: center;
+    width: 750rpx;
+    height: 130px;
+    line-height: 74px;
+  }
+  
+  .img-container {
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: row;
+    align-items: center;
+    width: 750rpx;
+    height: 74px;
+    line-height: 74px;
+  }
+  
+  .frame-wording {
+    justify-content: flex-start;
+    width: 750rpx;
+    padding-top: 15px;
+    text-align: center;
+    opacity: 0.5;
+    font-family: PingFangSC-Regular;
+    height: 20px;
+    line-height: 20px;
+    font-size: 14px;
+    color: #FFFFFF;
+  }
+  
+  .tool-blank {
+    width: 750rpx;
+  }
+  
+  .cam-container {
+    width: 538rpx;
+    text-align: center;
+  }
+  
+  .close {
+    padding-left: 66px;
+    width: 32px;
+    height: 32px;
+  }
+  
+  .cam {
+    margin: 0 auto;
+    width: 74px;
+    height: 74px;
+  }
+  
+  .pic {
+    padding-right: 66px;
+    width: 32px;
+    height: 32px;
+  }
+  
+  .touch-wording {
+    width: 750rpx;
+    text-align: center;
+    font-size: 14px;
+    /* padding-bottom: 36px; */
+    color: rgba(255, 255, 255, 0.90);
+  }
+  
+  .show-img {
+    position: fixed;
+    top: 0;
+    background-color: #000;
+    width: 750rpx;
+    height: 750vh;
+  }
+  
+  .photo {
+    width: 100%;
+    height: 100%;
+  }
+  
+  .btn-click:active {
+    opacity: 0.5;
+  }
+  
+  .choose-img-container {
+    position: fixed;
+    top: 0;
+    background-color: #000;
+    width: 750rpx;
+    height: 750vh;
+    line-height: 100%;
+  }
+  
+  .choose-img {
+    margin: auto 0;
+    width: 750rpx;
+    height: auto;
+    vertical-align: middle;
+  }

subpages/OCRCard/pages/index/index.json

@@ -1,6 +1,5 @@
 {
     "usingComponents": {
-        "ocr-navigator": "plugin://ocr-plugin/ocr-navigator"
     },
     "navigationStyle": "custom"
 

subpages/OCRCard/pages/index/index.wxml

@@ -18,7 +18,7 @@
 </view>
         <view style="font-size: 28rpx;color: #666666;" class="mt-16">温馨提示：请先拍照或上传身份证照片进行身份识别。</view>
     </view>
-    <ocr-navigator bind:onSuccess="cardSuccess" certificateType="idCard" opposite="{{false}}" class="ocr">
+    <navigator url="/subpages/OCRCard/pages/OCR/OCR" certificateType="idCard" opposite="{{false}}" class="ocr">
         <button hover-class="color"  style="background-color:#0bb4b4">开始识别</button>
-    </ocr-navigator>
+    </navigator>
 </view>