当我们拿到如下base64格式的数据时：

显示

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

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

<image src="https://img-blog.csdnimg.cn/2022010618172881448.png"></image>

显示不出来？

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

有一种原因是因为返回的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, 这一段去除）

var imgSrc =  this.data.imgData;//base64编码var save = wx.getFileSystemManager();var number = Math.random();save.writeFile({filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',data: imgSrc,encoding: 'base64',success: res => {wx.saveImageToPhotosAlbum({filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',success: function (res) {wx.showToast({title: '保存成功',})},fail: function (err) {console.log(err)}})console.log(res)}, fail: err => {console.log(err)}})

微信小程序中base64图片的显示与保存相关推荐

微信小程序中的图片处理
微信小程序中的图片处理微信小程序中的<image></image>用于向页面中插入图片.有两个重要的属性 1.src 要插入图片的资源地址 2.mode 图片裁剪.缩放 ...
微信小程序中进行图片压缩
微信小程序中进行图片压缩问题: 一般情况下,小程序在进行拍照识别的时候,上传图片的大小会使小程序出现冗余,这个时候,为了减少小程序的冗余并且使上传的图片可以分辨出该图片中的内容是那些内容,我们就需 ...
微信小程序中苹果iOS手机显示时间格式NaN不正确的问题
项目场景: 实现安卓Android和苹果iOS中微信小程序显示订单时间信息问题描述微信小程序中苹果iOS手机显示时间格式NaN不正确的问题原因分析: 安卓微信小程序显示正常,苹果按格式YYYY- ...
微信小程序设置背景图片不显示问题解决方法
最近开发小程序的过程中遇到了这样一个小问题,在wxss文件中通过background设置背景图片,要实现背景图片上显示文字的效果,发现背景图片不显示,设置背景图片的代码如下: .test {width ...
微信小程序中裁剪图片以及压缩到指定尺寸并上传
本文分为两个内容,分别是裁剪图片和压缩引出问题 1.为何要裁剪图片因为需要上传头像,但是每个型号的手机拍出来的照片尺寸都不太一样,不能统一,所以,希望在上传之前进行自主裁剪,保证上传到服务器上的尺 ...
微信小程序中base64转换成图片；uni-app小程序base64转图片；微信小程序base64文件转图片；微信小程序base64图片转图片
将微信小程序的图片转成base64 点击此链接看另一篇以下是将后端返回的base64转成图片: 方法1:使用微信小程序自带方法 //把base64转换成图片getBase64ImageUrl: (b ...
微信小程序中base64转换成图片
//把base64转换成图片getBase64ImageUrl: function(data) {/// 获取到base64Datavar base64Data = data;/// 通过微信小程序自 ...
微信小程序----相对路径图片不显示
出现场景在本地调试的时候本地图片显示,但是手机浏览的时候本地图片不显示. 出现图片不显示的原因小程序只支持网络路径和base64的图片.图片转base64在线工具处理方法将图片都放到服务器,然 ...
微信小程相对图片路径_微信小程序----相对路径图片不显示
出现场景在本地调试的时候本地图片显示,但是手机浏览的时候本地图片不显示. 出现图片不显示的原因小程序只支持网络路径和base64的图片.图片转base64在线工具处理方法将图片都放到服务器,然 ...

微信小程序中base64图片的显示与保存

显示

显示不出来？

如何保存？

微信小程序中base64图片的显示与保存相关推荐

最新文章

热门文章