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