Home
Softono

Wx Cardscanner

Open source JavaScript
185
Stars
137
Forks
7
Issues
7
Watchers
7 years
Last Commit

 About Wx Cardscanner

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

Platforms

Web Self-hosted

Languages

JavaScript

Links

Need Help Installing Wx Cardscanner?

We provide expert installation service for this software. Our team will install, configure, and secure Wx Cardscanner on your server. plans start at just $30.

Wx Cardscanner

View on GitHub

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)
      // ...
    }
  })
})