微信小程序使用阿里云ocr识别名片信息

事先说明，博文中只是一个简单的demo。阿里云的ocr识别有一定误差，图片的清晰光暗程度也会影响识别结果。

更完善的ocr识别名片程序，本人有两种想法：

一种是使用全能名片王的api，有收费部分。

一种是同时使用阿里云的名片识别接口和普通图片文字识别接口，在后台进行对比修正后再返回；同时看能否找到自动裁剪图片的方法。目前正在尝试此种方法，但是代码不方便放上来。有兴趣的可以自己研究。

源码地址：https://github.com/imiros/java-ocr-wxminipro

小程序主要代码---index.js

const app = getApp()
Page({
  data: {
    imageSrc: "",
    showView: false
  },
  chooseImage: function () {
    var that = this;
    wx.chooseImage({
      count: 1,
      success: function (e) {
        console.log(e.tempFilePaths[0])
        that.setData({
          imageSrc: e.tempFilePaths[0]
        })
        wx.showToast({
          title: '数据加载中',
          icon: 'loading',
          duration: 2000
        });
        wx.getFileSystemManager().readFile({
          filePath: e.tempFilePaths[0], //选择图片返回的相对路径
          encoding: 'base64', //编码格式
          success: res => {
            console.log("图片转码回调");
            wx.request({
              url: 'https://dm-57.data.aliyun.com/rest/160601/ocr/ocr_business_card.json',
              data: {
                "image": res.data
              },
              header: {
                "Authorization": "APPCODE e5d382e5d0a4*****0638b1e14a" //阿里云ocr名片识别code
              },
              method: 'POST',
              dataType: 'json',
              responseType: 'text',
              success: function (res) {
                console.log(res);
                if (200 == res.statusCode) {
                  that.setData({
                    showView: true,
                    name: res.data.name,
                    company: res.data.company,
                    department: res.data.department,
                    title: res.data.title,
                    tel_cell: res.data.tel_cell,
                    tel_work: res.data.tel_work,
                    addr: res.data.addr,
                    email: res.data.email
                  })

                } else {
                  wx.showModal({
                    title: '提示信息',
                    content: '你选择的图片不符合规格，请重新上传',
                    showCancel: false,
                    confirmText: '确定',
                    success: function (res) {
                      console.log("点击了确定", res)
                      that.setData({
                        imageSrc: "",
                        showView: false,
                        name: res.data.name,
                        company: res.data.company,
                        department: res.data.department,
                        title: res.data.title,
                        tel_cell: res.data.tel_cell,
                        tel_work: res.data.tel_work,
                        addr: res.data.addr,
                        email: res.data.email
                      })
                    }
                  })
                }
              }
            })
          }
        })
      }
    })
  },
})

小程序主要代码---index.wxml

<!--index.wxml-->
<view class="{{showView?'view_hide':'view_show'}}">
  <view class="container">
    <button bindtap='chooseImage'>扫名片</button>
  </view>
</view>
<image style='width:300px;height:170px;margin-left:10px' src='{{imageSrc}}'></image>
<view class="{{showView?'view_show':'view_hide'}}">
  <view class="weui-cells weui-cells_after-title">
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label">姓名</view>
      </view>
      <view class="weui-cell__bd">
        <input class="weui-input text-more" value='{{name}}' name="name" />
      </view>
    </view>
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label">公司</view>
      </view>
      <view class="weui-cell__bd">
        <input class="weui-input text-more" value='{{company}}' name="company" />
      </view>
    </view>
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label">部门</view>
      </view>
      <view class="weui-cell__bd">
        <input class="weui-input text-more" value='{{department}}' name="department" />
      </view>
    </view>
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label">职位</view>
      </view>
      <view class="weui-cell__bd">
        <input class="weui-input text-more" value='{{title}}' name="title" />
      </view>
    </view>
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label text-more">手机</view>
      </view>
      <view class="weui-cell__bd">
        <input class="weui-input text-more" value='{{tel_cell}}' name="tel_cell" />
      </view>
    </view>
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label text-more">座机</view>
      </view>
      <view class="weui-cell__bd">
        <input class="weui-input text-more" value='{{tel_work}}' name="tel_work" />
      </view>
    </view>
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label">地址</view>
      </view>
      <view class="weui-cell__bd">
        <textarea class="weui-textarea" value='{{addr}}' name="addr" disabled='true' />
      </view>
    </view>
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label">邮箱</view>
      </view>
      <view class="weui-cell__bd">
        <input class="weui-input text-more" value='{{email}}' name="email" />
      </view>
    </view>
  </view>
</view>

小程序主要代码---index.wxss

/**index.wxss**/

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

.view_show {
  display: block;
}

.view_hide {
  display: none;
}

.text-more {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

小程序---app.wxss

/**app.wxss**/
@import "pages/style/weui.wxss";

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}