文章参考
将本地图片转为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, '') // 将回车换行换为空字符''
如何保存?
只能将有文件路径的文件保存到相册
将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)
}
})