微信小程序圖片上傳（文字識別）

要點：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修改樣式和具體怎么框這些文字。