小程序怎么查看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图片的详细内容。