百度ai通用文字識別，出現image format error的問題

escape() 經常使用於對js字符串進行編碼
encodeURI() 經常使用於對URI跳轉進行編碼
encodeURIComponent() 經常使用於對參數傳遞時進行編碼（有可能特殊字符，/,=等形成URI的間斷問題）

解決辦法

在使用百度ai進行通用文字識別時，發送image=<base64編碼>這種格式時，請求api可能會返回image format error的問題，頗有多是編碼問題致使的，須要使用encodeURIComponent()這個方法來格式化一下便可，即image=encodeURIComponent(<base64編碼>)

舉例：從html中截取img標籤中的內容進行識別

此例子有跨域問題，須要自行使用後臺作一次轉發，這裏簡潔爲主，就暫時不考慮了。

簡潔爲主，只列出了img標籤

<img id="my-img" />

將img標記的內容轉換爲base64

// 獲取驗證碼
function getCode64 () {
  // 尋找該元素
  const img = document.querySelector('#my-img')
  //建立canvas畫布
  const canvas = document.createElement('canvas')
  canvas.width = img.width
  canvas.height = img.height

  // 畫圖
  const ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0, img.width, img.height)

  // 轉換，有前綴，百度api要求去掉前綴
  const dataURL = canvas.toDataURL('image/png')

  // 返回
  return dataURL.replace('data:image/png;base64,', '')
}

進行請求

採用了原生的XMLHttpRequest,固然也能夠使用fetch

實際是有跨域問題，這裏暫時不考慮

// 百度通用文字識別api地址，記得加access_token
const GeneralURL = 'xxxxx' 

// 查詢驗證碼
function fetchNum(base64) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open('POST', GeneralURL, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 此時要進行編碼
    xhr.send(`image=${encodeURIComponent(base64)}`)

    xhr.onreadystatechange = function() {
      if(xhr.readyState == 4 && xhr.status == 200 ) {
        const result = JSON.parse(xhr.responseText)
        try {
          const code = result.words_result[0].words
          resolve(code)
        } catch (err) {
          reject(err)
        }
      }
    }
  })
}

使用

let base64 = getCode64()
fetchNum(base64).then(res => {
    // res爲處理結果
})

相關鏈接

URL編碼轉換函數：escape()、encodeURI()、encodeURIComponent()講解：https://www.cnblogs.com/2f28/p/9748441.html