微信小程序開發——base64位圖片顯示問題

前言：

目前小程序項目須要後端藉口提供驗證碼圖片，後端是以base64位返回的，按照H5的作法，前邊拼上 data:image/png;base64, 應該就能夠了，關鍵代碼以下：

H5:

<img :src="asynImg" @click="getImage();" class="code">

_self.asynImg = 'data:image/png;base64,' + response.data.data;

如此，顯示正常，沒有作任何特殊處理。

小程序：

<image class='fr' wx:if="{{validate_code_data&&validate_code_data.data}}" src="data:image/png;base64,{{validate_code_data.data}}"></image>

固然也能夠直接在js中把base64位的格式頭拼接在數據的前邊，這個並不影響。關鍵是小程序種，圖片居然不顯示了，這是爲何呢？

異常解析：

 

看下後臺返回的數據：

能夠看到，後臺返回的base64數據是有換行的，經查證，後端返回的base64位數據是一致的，包括編譯後的html和wxml代碼結構層面都是同樣的，這隻能說明小程序兼容性不如h5了。

那麼咱們就須要在小程序種對後端提供的數據進行去換行處理了，關鍵代碼以下：

解決方案：

      var base64 = res && res.data
      if (base64) {
        base64 = base64.replace(/[\r\n]/g, "")
        res.data = base64
        self.setData({
          validate_code_data: res
        })
      }

如上，只需一行代碼，便可完美展現驗證碼。

後記：

網上還有另外一種處理方法，以下：

var array = wx.base64ToArrayBuffer(res.data)
var base64 = wx.arrayBufferToBase64(array)
that.setData({ captchaImage: 'data:image/png;base64,' + base64});

這種方法是能夠顯示圖片，可是有些不正常。具體表現是連續點擊會出現圖片不顯示，控制檯報錯：

VM1437:1 thirdScriptError
"atob" failed;undefined
Error: "atob" failed

調試了下，報錯的時候在第二行代碼這裏 var base64 = wx.arrayBufferToBase64(array) 變量已經爲空了，也就是這個轉換出了問題。

網上查了下，這個問題應該仍是後端返回的base64串帶換行致使的，若是要使用這種方式，也是須要在前邊去掉換行的。

不過話又說回來了，既然去掉換行能處理這個問題，那麼還何須再多加兩行轉換的代碼呢。