如何显示(与image标签的src绑定)
当我们拿到如下base64格式的图片(如下图)时,base64格式的图片数据:
若imgData返回数据中不含data:image/png;base64,时,需要加上,以下是示例:
<image src="data:image/png;base64,{{imgData}}"></image>
为啥不显示?
按照上面的方法,但是图片显示不出来。。。 有一种原因是因为返回的base64的数据中存在回车换行,需要回车换行替换为''即可,示例:
var base64Image = 'base64数据' // 后台返回的base64数据
var imgData = base64Image.replace(/[\r\n]/g, '') // 将回车换行换为空字符''
如何保存到本地,或者将本地的图片转换为base64?
使用writeFile及saveImageToPhotosAlbum API保存至相册,具体JS代码如下: (注意:若imgData返回数据中含有data:image/png;base64,时,data参数需要写成:imgSrc.slice(22),意思为:这里是把 data:image/png;base64, 这一段去除)
/*code是指图片base64格式数据*/
//声明文件系统
const fs = wx.getFileSystemManager();
//随机定义路径名称
const times = new Date().getTime();
const codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png';
//将base64图片写入
fs.writeFile({
filePath: codeimg,
data: base64的数据流,
encoding: 'base64',
success: (res) => {
//写入成功了的话,新的图片路径就能用了
console.log(res)
console.log(codeimg)
//使用saveImageToPhotosAlbum()方法保存
// uni.saveImageToPhotosAlbum()
}
});