1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 微信小程序识别图片并提取文字_微信小程序图片上传(文字识别)

微信小程序识别图片并提取文字_微信小程序图片上传(文字识别)

时间:2018-07-06 18:29:49

相关推荐

微信小程序识别图片并提取文字_微信小程序图片上传(文字识别)

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。