微信小程序 base64格式图片的显示及保存

墨蓝 2023-06-04 11:55 68阅读 0赞

当我们拿到如下base64格式的图片（如下图）时，

base64格式的图片数据：

![801250-20190719153424543-127367368.png][]

# 如何显示 ？ #

使用image标签，src属性添加data:image/png;base64,

> （注意：若imgData返回数据中含有data:image/png;base64,时，src直接写src="\{ \{imgData\}\}"即可）

# 显示不出来？ #

按照上面的方法，但是图片显示不出来。。。

有一种原因是因为返回的base64的数据中存在回车换行，需要回车换行替换为''即可

var base64Image = 'base64数据' // 后台返回的base64数据
    var imgData = base64Image.replace(/[\r\n]/g, '') // 将回车换行换为空字符''

然后通过image标签显示即可。

# 如何保存？ #

使用writeFile及saveImageToPhotosAlbum API保存至相册，具体JS代码如下：

> （注意：若imgData返回数据中含有data:image/png;base64,时，data参数需要写成：imgSrc.slice(22)，意思为：这里是把 data:image/png;base64,  这一段去除）

本想使用wx.previewImage来预览图片并保存，但是此API的参数只能是网络链接，所以放弃，采用以上方法保存。

> 说明：
> 
> 1. wx.getFileSystemManager()  是获取文件管理器对象
> 
> 2. wx.env.USER\_DATA\_PATH + '/pic' + number + '.png'表示生成一个临时文件名

转载于:https://www.cnblogs.com/china-fanny/p/11213746.html

[801250-20190719153424543-127367368.png]: /images/20230601/3d57e00f5b7e48508159e9b075f50e4f.png

还没有评论，来说两句吧...