微信小程序 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'表示生成一個臨時文件名