小程序如何查看base64图片

这篇文章给大家分享的是有关小程序如何查看base64图片的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

一、后台传过来的图片为base64格式的，显示的话用【"data:image/PNG;base64," + data】就可以正常显示。然后在调用微信api接口previewImage却有诸多问题，如：

• windows开发工具黑屏

• 部分安卓机型无法显示

• 控制台报错等

二、经过查询，找到了官方的回答。微信官方的意思是需要用url地址，不支持base64格式，以下是微信官方回答：

wx.previewImage API 预览base64图片导致微信闪退? | 微信开放社区 (qq.com)

https://developers.weixin.qq.com/commUnity/develop/doc/00088c9e44c3D880597ab22b15bc00?highLine=wx.previewImage%20base64

解决方案

思路：先把base64作为临时文件存到本地，然后预览，预览结束时删除临时文件

// 获取应用实例const app = getApp()Page({  data: {    //base64数据，由后台传过来    base64: '',    //本机的临时文件路径    localImgUrl: ''  },  onShow: function() {    // 在这里删除临时文件    var localImgUrl = this.data.localImgUrl;    if(localImgUrl) {      var fs = wx.getFileSystemManager();      fs.unlinkSync(localImgUrl);      fs.closeSync();    }  },      //预览图片  onPreviewImage() {    var base64 = "data:image/PNG;base64," + this.data.base64;    var imgPath = wx.env.USER_DATA_PATH + '/e-invoice' + Date.parse(new Date()) + '.png';    var imageData = base64.replace(/^data:image\/\w+;base64,/, "");    var fs = wx.getFileSystemManager();    fs.writeFileSync(imgPath, imageData, "base64");    fs.close();    this.setData({      localImgUrl: imgPath    })    wx.previewImage({      urls: [imgPath] // 需要预览的图片Http链接列表    })  }})

感谢各位的阅读！关于“小程序如何查看base64图片”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！