文章目录
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解析失败'
})
}
})
})
}