微信小程序 base64格式圖片的顯示及保存

當咱們拿到以下base64格式的圖片（以下圖）時，

base64格式的圖片數據：

 

如何顯示 ？

使用image標籤，src屬性添加data:image/png;base64,

（注意：若imgData返回數據中含有data:image/png;base64,時，src直接寫src="{{imgData}}"便可）

<image src="data:image/png;base64,{{imgData}}"></image>

顯示不出來？

按照上面的方法，可是圖片顯示不出來。。。

有一種緣由是由於返回的base64的數據中存在回車換行，須要回車換行替換爲''便可

var base64Image = 'base64數據' // 後臺返回的base64數據
var imgData = base64Image.replace(/[\r\n]/g, '') // 將回車換行換爲空字符''

而後經過image標籤顯示便可。

如何保存？

使用writeFile及saveImageToPhotosAlbum API保存至相冊，具體JS代碼以下：

（注意：若imgData返回數據中含有data:image/png;base64,時，data參數須要寫成：imgSrc.slice(22)，意思爲：這裏是把 data:image/png;base64,  這一段去除）

    var imgSrc =  this.data.imgData;//base64編碼
    var save = wx.getFileSystemManager();
    var number = Math.random();
    save.writeFile({
      filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
      data: imgSrc,
      encoding: 'base64',
      success: res => {
        wx.saveImageToPhotosAlbum({
          filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
          success: function (res) {
            wx.showToast({
              title: '保存成功',
            })
          },
          fail: function (err) {
            console.log(err)
          }
        })
        console.log(res)
      }, fail: err => {
        console.log(err)
      }
    })

本想使用wx.previewImage來預覽圖片並保存，可是此API的參數只能是網絡連接，因此放棄，採用以上方法保存。

 

說明：

1. wx.getFileSystemManager()  是獲取文件管理器對象

2. wx.env.USER_DATA_PATH + '/pic' + number + '.png'表示生成一個臨時文件名