小程序base64格式图片的显示和保存
在小程序开发的过程中,我们在使用base64图片的时候,会出现图片不显示的问题,是为什么呢?今天在这里把自己的踩过的坑分享一下。
当我们拿到如下base64格式的图片(如下图)时,
base64格式的图片数据:
一、如何显示 ?
使用image标签,src属性添加data:image/png;base64,
(注意:若imgData返回数据中含有data:image/png;base64,时,src直接写src=”“即可)
1 | <image src="data:image/png;base64,{{imgData}}"></image> |
如果按照上面的方法,图片还是显示不出来?
在返回的base64的数据中存在回车换行,你只需要回车换行替换为’’即可。
1 | // 后台返回的base64数据 |
然后用image标签的形式引入就可以正常显示了。
二、那么如何保存?
使用writeFile及saveImageToPhotosAlbum API保存至相册,具体JS代码如下:
1 | var imgSrc = this.data.imgData;//base64编码 |
本想使用wx.previewImage来预览图片并保存,但是此API的参数只能是网络链接,所以放弃,采用以上方法保存。
说明:
- wx.getFileSystemManager() 是获取文件管理器对象
- wx.env.USER_DATA_PATH + ‘/pic’ + number + ‘.png’表示生成一个临时文件名