云开发实战实战3--图片证件识别应用（代码资源后续上传）

实现项目展示

本文需要调用小程序接口中的OCR接口，具体接口使用请查看文档。
文章直通车

• 识别证件的选择栏首页
  

• （例）点击识别印刷体，然后选择好要识别的文本数据上传
  

• 识别后的结果就会对象的数据类型形式返回，可以通过其他操作利用数据，在这里仅对所有识别结果进行展示。具体可返回数据看文件。

  

注1：在进行本项目前，请确保您的小程序已经购买了OCR识别服务（免费额度为：100次/天），购买地址：https://developers.weixin.qq.com/community/servicemarket/detail/000ce4cec24ca026d37900ed551415

购买直通车
如果执行代码的时候报错为：返回值：{“errcode”:101003,“errmsg”:“not enough market quota hint: [ZRdLUa04902276] rid: 5f6afe82-0149d05d-4328453c”}
那么就是没有购买ocr服务。

项目代码

1.云存储文件夹格式

注意图中给出的文件存储结构，需要与代码中给出的存储结构对应，可自行修改

2.部分代码展示（项目整体代码后续会上传至资源）

2.1 云函数代码

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async (event, context) => {

  if (event.select_btnname == "shenfenzheng") {
    //类型一：身份证识别
    try {
      const result = await cloud.openapi.ocr.idcard({
        type: 'photo',
        imgUrl: event.img
      })
      console.log(result)
      return result
    } catch (err) {
      console.log(err)
      return err
    }
  } else if (event.select_btnname == "yinhangka") {
    //类型二：银行卡识别
    try {
      const result = await cloud.openapi.ocr.bankcard({
        type: 'photo',
        imgUrl: event.img
      })
      console.log(result)
      return result
    } catch (err) {
      console.log(err)
      return err
    }
  } else if (event.select_btnname == "jiashizheng") {
    //类型三：驾驶证识别
    try {
      const result = await cloud.openapi.ocr.driverLicense({
        type: 'photo',
        imgUrl: event.img
      })
      console.log(result)
      return result
    } catch (err) {
      console.log(err)
      return err
    }
  } else if (event.select_btnname == "xingshizheng") {
    //类型四：行驶证识别
    try {
      const result = await cloud.openapi.ocr.vehicleLicense({
        type: 'photo',
        imgUrl: event.img
      })
      console.log(result)
      return result
    } catch (err) {
      console.log(err)
      return err
    }
  } else if (event.select_btnname == "yinshuati") {
    //类型五：印刷体识别
    try {
      const result = await cloud.openapi.ocr.printedText({
        type: 'photo',
        imgUrl: event.img
      })
      console.log(result)
      return result
    } catch (err) {
      console.log(err)
      return err
    }
  } else if (event.select_btnname == "zhizhao") {
    //类型六：营业执照识别
    try {
      const result = await cloud.openapi.ocr.businessLicense({
        imgUrl: event.img
      })
      console.log(result)
      return result
    } catch (err) {
      console.log(err)
      return err
    }

  }
}

2.2 本地代码

<view wx:if="{{showbutton}}" class="all_btn">
  <view class="title">请选择您要内容的原件：</view>
  <button bindtap="btn_shibie" type="primary" data-type="shenfenzheng">识别身份证</button>
  <button bindtap="btn_shibie" type="primary" data-type="yinhangka">识别银行卡</button>
  <button bindtap="btn_shibie" type="primary" data-type="jiashizheng">识别驾驶证</button>
  <button bindtap="btn_shibie" type="primary" data-type="xingshizheng">识别行驶证</button>
  <button bindtap="btn_shibie" type="primary" data-type="yinshuati">识别印刷体</button>
  <button bindtap="btn_shibie" type="primary" data-type="zhizhao">识别营业执照</button>
</view>
<view wx:if="{{!showbutton}}" class="all_content">
  <image src="{{res_img}}">这里是图片位置</image>
  <view>
    <view>识别后的内容为：</view>
    <!-- 通过在text组件中设置selectable="true"，来实现前端文字可以复制的功能 -->
    <view wx:for="{{res_content}}" wx:key="index" ><text selectable="true">{{item}}</text></view>
  </view>
  <button bindtap="back_select" type="primary">返回选择栏</button>
</view>

.all_btn button {
  margin-top: 30rpx;
}

.title {
  font-size: 60rpx;
}

.all_content{
  margin-top: 30rpx;
}

Page({
  data: {
    showbutton: true,//设置选择框是否展示参数
  },

  //步骤一：选择图片并上传图片，并携带文件数据类型
  btn_shibie(event) {
    console.log(event.currentTarget.dataset.type)
    //获取到前端按得是哪一个按钮
    let select_btnname = event.currentTarget.dataset.type
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: res => {
        const tempFilePaths = res.tempFilePaths
        // console.log("临时链接", tempFilePaths)
        this.uploadFile(tempFilePaths[0], select_btnname)
      }
    })

  },

  //步骤二：上传图片到云存储
  uploadFile(tempFile, select_btnname) {
    let timestamp = Date.parse(new Date());
    // console.log("当前时间戳", timestamp)
    wx.cloud.uploadFile({
      cloudPath: "实战资源/图片识别/" + select_btnname + "/" + timestamp + '.png',
      filePath: tempFile, // 文件路径
      success: res => {
        console.log("上传图片成功", res.fileID)
        this.getImgUrl(res.fileID, select_btnname)
      },
      fail: err => {
        console.log("上传图片失败", err)
      }
    })
  },

  // 步骤三：获取图片url，因为识别的接口只能识别网络格式的图片连接，所以需要获取到图片的网络连接。
  // Cloud.getTempFileURL(fileList: string[]): Promise<Object>用云文件 ID 换取真实链接，公有读的文件获取的链接不会过期，私有的文件获取的链接十分钟有效期。一次最多取 50 个
  //文档地址：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/storage/Cloud.getTempFileURL.html
  getImgUrl(fileid, select_btnname) {
    wx.cloud.getTempFileURL({
      fileList: [fileid],
      success: res => {
        let tempUrl = res.fileList[0].tempFileURL
        console.log("获取图片url成功", tempUrl)
        this.shibie(tempUrl, select_btnname)
      },
      fail: err => {
        console.log("获取图片url失败", err)
      }
    })
  },

  //步骤四：调用ocr接口获取到返回的内容数据，并显示到前端页面
  shibie(tempUrl, select_btnname) {
    let that = this
    wx.cloud.callFunction({
      name: "shibie",
      data: {
        img: tempUrl,
        select_btnname: select_btnname
      },
      success(res) {
        console.log("识别成功", res)
        if (select_btnname == "yinshuati") {//如果识别主体为印刷体，那么数据格式会为对象套对象的形式，需要特殊的数据处理，如果有其他需求大家可自行在这里修改
          let message = ""
          for (var i = 0; i < res.result.items.length; i++) {
            message += res.result.items[i].text
          }
          that.setData({
            res_img: tempUrl,
            showbutton: false,
            res_content: {message}//如果不加的话传输过去就是字符串，一个字符会占一行
          })
        } else {
          that.setData({
            res_img: tempUrl,
            showbutton: false,
            res_content: res.result
          })
        }

      },
      fail(res) {
        console.log("识别失败", res)
        wx.showToast({
          title: '图片识别失败，请重试',
          duration: 2000
        })
      }

    })
  },


  //返回文件类型选择栏
  back_select() {
    this.setData({
      showbutton: true,
    })
  },

  //获取当前时间,返回时间格式：2019-05-23 15:43:36
  getNowFormatDate: function () {
    var date = new Date();
    var seperator1 = "-";
    var seperator2 = ":";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
      month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
    }
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
      " " + date.getHours() + seperator2 + date.getMinutes() +
      seperator2 + date.getSeconds();
    return currentdate;
  },

})