微信小程序開發——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串帶換行導致的，如果要使用這種方式，也是需要在前邊去掉換行的。

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