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

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