wx小程序图片和base64相互转换

文章参考

1. 小程序图片转Base64，方法总结。
2. 微信小程序 base64格式图片的显示及保存

将本地图片转为base64

同步方法——wx.getFileSystemManager().readFileSync

wx.canvasToTempFilePath({
     
  canvasId: 'photo_canvas',
  success: function (res) {
     
    let sBase64 = 'data:image/jpeg;base64,' + wx.getFileSystemManager().readFileSync(res.tempFilePath, 'base64')
  },
  fail: function (error) {
     
    console.log(error)
  }
})

异步方法——wx.getFileSystemManager().readFile

wx.chooseImage({
     
  success: res => {
     
  wx.getFileSystemManager().readFile({
     
	  filePath: res.tempFilePaths[0], //选择图片返回的相对路径
	  encoding: 'base64', //编码格式
	  success: res => {
      //成功的回调
		console.log('data:image/png;base64,' + res.data)
	  }
	})
  }
})

将base64字符串转为图片显示

基本用法

<image class="img" :src="base64Image" mode="widthFix" >image>

export default {
     
	data: function() {
     
		return {
     
			base64Image: 'data:image/jpeg;base64,...AYEBAQEBAgGBgUGCQgKCgk...' // 只显示了一部分
		}
	},
}

显示不出来

有一种原因是因为返回的base64的数据中存在回车换行，需要回车换行替换为’'即可

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

如何保存？

1. wx.saveImageToPhotosAlbum(Object object)

只能将有文件路径的文件保存到相册

2. FileSystemManager.writeFile(Object object)

将base64 / 二进制 / 其他编码数据 转为文件

思路：

1. 将base64字符串转为本地文件
2. 再将本地文件保存到相册

案例代码

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)
	}
})