uni-app(微信小程序) base64格式图片的处理与本地临时路径的切换

4,948 阅读1分钟

如何显示(与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()
  }
});