微信小程序实现智能识别名片

1、背景

最近在做一个CRM微信小程序工具，用户提出需要增加名片拍照智能识别的需求。由于在前段时间特意对BAT AI开放平台的OCR能力做过了解（具体参见本文：百度、阿里、腾讯开放平台OCR功能解析），故设想使用腾讯开放平台名片OCR接口完成以上需求。

2、腾讯开放平台名片OCR接口

2.1 文档参考

注意：腾讯开放平台接口的接口鉴权的签名算法较为特殊。

. 接口描述
根据用户上传的名片图像，返回识别出的名片字段信息，目前已支持20多个字段识别（姓名、英文姓名、职位、英文职位、部门、英文部门、公司、英文公司、地址、英文地址、邮编、邮箱、网址、手机、电话、传真、QQ、MSN、微信、微博、公司账号、logo、其他）

2.2 小程序OCR功能主要JS代码实现

let md5 = require('../md5.js')
let app_id = '请录入您对应的app_id'
let app_key = '请录入您对应的app_key'
let url = 'https://api.ai.qq.com/fcgi-bin/ocr/ocr_bcocr'

let request = (base64Img, callback) => {
  let params = {
    app_id: app_id,
    image: base64Img,
    nonce_str: Math.random().toString(36).substr(2),
    time_stamp: parseInt(new Date().getTime() / 1000).toString()
  }
  params['sign'] = _genRequestSign(params)
  wx.request({
    url: url,
    data: params,
    header: {
      'content-type': 'application/x-www-form-urlencoded'
    },
    method: 'POST',
    success: function (res) {
      let formatRes = _formatResult(res.data)
      if (formatRes) {
        if (callback.success)
          callback.success(formatRes)
      } else {
        if (callback.fail)
          callback.fail()
      }
    },
    fail: function (res) {
      if (callback.fail)
        callback.fail()
    }
  })
}

let _genRequestSign = (params) => {
  // 1. 对请求参数按字典升序排序
  params = _sortObject(params)
  // 2. 拼接键值对，value部分进行URL编码
  let paramStr = ''
  let keys = Object.keys(params)
  for (let idx in keys) {
    let key = keys[idx]
    paramStr += key + '=' + encodeURIComponent(params[key]) + '&'
  }
  // 3. 拼接key
  paramStr += 'app_key=' + app_key
  // 4. md5
  return md5.hexMD5(paramStr).toUpperCase()
}

let _sortObject = (obj) => {
  var keys = Object.keys(obj).sort()
  var newObj = {}
  for (var i = 0; i < keys.length; i++) {
    newObj[keys[i]] = obj[keys[i]]
  }
  return newObj
}

let _formatResult = (res) => {
  let format = {}
  if (res.ret == 0 && res.data && res.data.item_list) {
    let itemList = res.data.item_list
    let item, itemName
    let key = 'unknown'
    for (let idx in itemList) {
      item = itemList[idx]
      itemName = item.item
      if (itemName == '姓名')
        key = 'name'
      else if (itemName == '职位')
        key = 'title'
      else if (itemName == '公司')
        key = 'comp'
      else if (itemName == '地址')
        key = 'addr'
      else if (itemName == '邮箱')
        key = 'email'
      else if (itemName == '手机')
        key = 'phone'
      else if (itemName == '电话')
        key = 'tel'
      else if (itemName == 'QQ')
        key = 'QQ'
      else if (itemName == '微信')
        key = 'WX'
      else if (itemName == '传真')
        key = 'fax'
      else if (itemName == '邮编')
        key = 'postcode'

      if (format[key]) {
        format[key].push(item.itemstring)
      } else {
        format[key] = [item.itemstring]
      }
    }
    return format
  }
}

module.exports = {
  request: request
}

3、微信小程序名片OCR功能接入

3.1 微信小程序首页设计

在首页右上角加入扫名片功能

3.2 扫名片功能实现

3.2.1 识别页面

  <view class='scanner'>
    <canvas class='canvas' id='scannerCanvas' canvas-id='scannerCanvas' disable-scroll="true" />
    <view class="buttons">
      <view class="choose" bindtap="bindChooseImg">拍照识别</view>
      <view class="confirm" bindtap="bindConfirm">确定</view>
    </view>
  </view>

3.2.2 识别程序

var ocr = require('./ocrapi/ocr.js')
...
  setImage(imgFilePath) {
    if (imgFilePath) {
      let that = this
      this.img = {
        path: imgFilePath
      }
      this._getImgSize(this.img)
        .then((img) => {
          return that._getCanvasSize()
        })
        .then(() => {
          that._calcTarget()
          that._drawTarget()
        })
    }
  }

  bindChooseImg(e) {
    let scanner = this.cardScanner
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      success: function (res) {
        scanner.onImageChanged && scanner.onImageChanged(res.tempFilePaths[0])
        scanner.setImage(res.tempFilePaths[0])
      },
      fail(e) {
        console.error(e)
      }
    })
  }

  bindConfirm(e) {
    let scanner = this.cardScanner
    if (scanner.finishDraw) {
      scanner.onDecodeStart && scanner.onDecodeStart()
      scanner._decodeTarget()
    } else {
      console.log('绘制未完成')
    }
  }

   _decodeTarget() {
    let that = this
    this._getTargetImgData()
      .then((res) => {
        return that._toPNGBase64(res.buffer, res.width, res.height)
      })
      .then((base64) => {
        return that._requestOCR(base64)
      })
      .then(res => {
        that.onDecodeComplete && that.onDecodeComplete({
          code: 0,
          data: res
        })
      })
      .catch(error => {
        that.onDecodeComplete && that.onDecodeComplete(error)
      })
  }

  _getTargetImgData() {
    let that = this
    return new Promise((resolve, reject) => {
      wx.canvasGetImageData({
        canvasId: canvasID,
        x: that.target.left,
        y: that.target.top,
        width: that.target.width,
        height: that.target.height,
        success(res) {
          let platform = wx.getSystemInfoSync().platform
          if (platform == 'ios') {
            // 兼容处理：ios获取的图片上下颠倒
            res = that.reverseImgData(res)
          }
          resolve({
            buffer: res.data.buffer,
            width: res.width,
            height: res.height
          })
        },
        fail(e) {
          reject({
            code: 1,
            reason: '读取图片数据失败'
          })
        }
      })
    })
  }

  reverseImgData(res) {
    var w = res.width
    var h = res.height
    let con = 0
    for (var i = 0; i < h / 2; i++) {
      for (var j = 0; j < w * 4; j++) {
        con = res.data[i * w * 4 + j]
        res.data[i * w * 4 + j] = res.data[(h - i - 1) * w * 4 + j]
        res.data[(h - i - 1) * w * 4 + j] = con
      }
    }
    return res
  }

  _toPNGBase64(buffer, width, height) {
    return new Promise((resolve, reject) => {
      try {
        let pngData = upng.encode([buffer], width, height)
        resolve(wx.arrayBufferToBase64(pngData))
      } catch (e) {
        reject({
          code: 2,
          reason: '图片转base64失败'
        })
      }
    })
  }

  _requestOCR(base64) {
    return new Promise((resolve, reject) => {
      ocr.request(base64, {
        success(res) {
          resolve(res)
        },
        fail() {
          reject({
            code: 3,
            reason: 'OCR解析失败'
          })
        }
      })
    })
  }	

4 名片识别验证

4.1 名片拍照

4.2 名片识别