小程序–base64格式图片的显示以及保存

小程序base64格式图片的显示和保存

在小程序开发的过程中，我们在使用base64图片的时候，会出现图片不显示的问题，是为什么呢？今天在这里把自己的踩过的坑分享一下。
当我们拿到如下base64格式的图片（如下图）时，
base64格式的图片数据：

一、如何显示 ？
使用image标签，src属性添加data:image/png;base64,
（注意：若imgData返回数据中含有data:image/png;base64,时，src直接写src=”“即可）

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

如果按照上面的方法，图片还是显示不出来？
在返回的base64的数据中存在回车换行，你只需要回车换行替换为’’即可。

// 后台返回的base64数据
var base64Image = 'base64数据' 
// 将回车换行换为空字符''
var imgData = base64Image.replace(/[\r\n]/g, '') 

然后用image标签的形式引入就可以正常显示了。
二、那么如何保存？
使用writeFile及saveImageToPhotosAlbum API保存至相册，具体JS代码如下：

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’表示生成一个临时文件名