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

当 base64 格式图片数据为： base64Url = 'data:image/png;base64,' + base64编码时。（base64 编码中不包括前缀 data:image/png;base64,）

    <image src="{{base64Url}}" />

显示不出来

按照上述方法，但是图片显示不出来。。。 可能原因是在小程序中 base64 的数据中包括回车、换行符，无法识别。将回车、换行符全局替换成''(空字符串)即可。

    var base64Data = 'base64数据'; // 后台返回的 base64 格式的图片数据
    var imgUrl = base64Data.replace(/[\r\n]/g, ''); // 替换回车、换行符

图片保存到相册

注意：imgData 为 不包含 data:image/png;base64, 格式的 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 只能用于网络链接

如何保存网络图片

通过 wx.downloadFile 保存临时文件路径的方式实现。

wx.downloadFile({
  url: '下载资源的url',
    success(res) {
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: res => {
            console.log('保存成功', res)
        },
        fail: error => {
        	if (error.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' ||
                    error.errMsg === 'saveImageToPhotosAlbum:fail auth deny' ||
                    error.errMsg === 'saveImageToPhotosAlbum:fail authorize no response') {
                    wx.showModal({
                        content: '需要您授权保存相册',
                        showCancel: false,
                        success: () => {
                          wx.openSetting({
                            success: (settingdata) => {
                              if (settingdata.authSetting['scope.writePhotosAlbum']) {
                                wx.showToast({
                                  title: '获取权限成功,再次点击图片即可保存',
                                  icon: 'none',
                                  mask: true
                                })
                              } else {
                                wx.showToast({
                                  title: '获取权限失败，将无法保存到相册哦~',
                                  icon: 'none',
                                  mask: true
                                })
                              }
                            },
                            fail: (failData) => {
                              console.log(failData)
                            }
                          })
                        }
                      })
            }
        }
      })
    }
})