chenguitang / wx-cardscanner

名片扫描-微信小程序，包括腾讯 ai 开放平台的使用，以及在小程序中实现图片转 Base64 的方法。

wx-cardscanner

名片扫描-微信小程序

基础库版本 >= 1.9.0

OCR

接口调用的是腾讯ai开放平台的ocr名片扫描，请将ocr.js中的app_id、app_key替换成自己的。
经测试，腾讯ai开放平台的名片识别率较高，且能识别字段非常丰富，中英文识别率都不错。
其中签名部分计算方式如下：

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
}

图片转Base64

接口要求将图片进行base64编码后上传，最简单的方法就是读取图片文件原始数据，然后进行base64编码，但是微信小程序没有提供文件操作接口，只能寻求其他方法

更新，小程序Api中已提供文件读取的接口，通过FileSystemManager.readFile({filePath: filePath, encoding: 'base64', success: (res) => {})即可获取）。

在基础库1.9.0中，微信提供了一个接口wx.canvasGetImageData可以获取canvas上指定区域的图像数据，所以可以将图片绘制到canvas上，再通过canvas获取图像数据，那么在小程序中将图片进行base64编码的流程如下：

1. 绘制图片至canvas
2. 获取canvas上图像数据
3. 使用开源库UPNG对原始图像数据进行png编码
4. png编码后数据进行base64编码

canvas = wx.createCanvasContext(canvasID)
// 1. 绘制图片至canvas
canvas.drawImage(imgPath, 0, 0, imgWidth, imgHeight)
// 绘制完成后执行回调，API 1.7.0
canvas.draw(false, () => {
  // 2. 获取图像数据， API 1.9.0
  wx.canvasGetImageData({
    canvasId: canvasID,
    x: 0,
    y: 0,
    width: imgWidth,
    height: imgHeight,
    success(res) {
      // 3. png编码
      let pngData = upng.encode([res.data.buffer], res.width, res.height)
      // 4. base64编码
      let base64 = wx.arrayBufferToBase64(pngData)
      // ...
    }
  })
})