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

要点：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修改样式和具体怎么框这些文字。

转载于:https://www.cnblogs.com/wyfeng1/p/7815225.html