微信小程序图片上传（文字识别）

要点：OCR文字识别 图片上传

在最近的项目中遇到须要进行OCR识别，中间遇到的坑记录一下

OCR接口：采用百度OCR通用文字识别

在进行调试过程当中遇到下列问题:

百度ocr接口1.对图片经行base64 位转码且不要头部data：base这些标识

2.转码之后要进行必须经行encodeURI（）转换

3.头部必须为

header: {
                'content-type': 'application/x-www-form-urlencoded'
              },

下面正式介绍小程序开发过程遇到的坑：

文字识别确定要上传图片，微信提供的接口为

wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData:{
        'user': 'test'
      },
      success: function(res){
        var data = res.data
        //do something
      }

由于小程序端暂时没法进行图片转base64 因此进行图片上传在后端转base64；

在实际开发中，这一块很抗，微信端也没给出官方说明；

首先是 name属性里面图片二进制数据没法获取，而后测试formData也没法获取，查资料后，对formData数据上传前进行encodeURI（）转换，以后后端进行解码能够得到数据；

可是上传的图片仍是获取不到，各类查资料后发现，图片上传小程序采用的是

header: {
            'content-type': 'multipart/form-data'
          },

这种头部，属于一种特殊的表单提交，这时候就看不一样语言后端怎么处理了。

数据处理完之后可以正常显示，可是上传图片太大会出现413错误；

这个问题是服务器设置问题，修改了两个地方，具体的能够本身去百度。

而后就是调用百度OCR接口，以这张图片为例：

返回数据为：

location
:
{width: 294, top: 179, height: 79, left: 155}
words
:
"格蓝迪"

 

数据里面会有文字在图片上的位置，高度等信息

这时候你就能够操做这些信息在图片上显示：让文字带有边框等，加上边框后如图：

大体流程就这样，稍后为你们更一篇wx:for修改样式和具体怎么框这些文字。