1、使用image标签
src属性添加data:image/png;base64
(注意:若imgData返回数据中含有data:image/png;base64,时,src直接写src="{{imgData}}"即可)
<image src="data:image/png;base64,{{imgData}}"></image>
显示不出来,有一种原因是因为返回的base64的数据中存在回车换行,需要回车换行替换为''即可。
var imgData = imgData .replace(/[\r\n]/g, '') // 将回车换行换为空字符''
如果后端返回的是图片
wx.request({
url: url, //获取图片的URL
method:"get",,
responseType: 'arraybuffer',
success (res) {
let url ='data:image/png;base64,'+wx.arrayBufferToBase64(res.data)
that.setData({
codeUrl : url, //设置data里面的图片url
})
},
fail(res){
}
})
wxml里面代码如下:
<view>
<image src='{{codeUrl}}'></image>
</view>
2、如何保存
(注意:若imgData返回数据中含有data:image/png;base64,时,data参数需要写成:imgSrc.slice(22),意思为:这里是把 data:image/png;base64, 这一段去除)
var imgSrc = this.data.imgData; //base64编码
var fs = wx.getFileSystemManager();
var number = Math.random();
fs.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)
}
})
3、PDf打开预览
用wx.base64ToArrayBuffer()将 Base64 字符串转成 ArrayBuffer 对象并去空格,再写入文件,最后打开。
var fs = wx.getFileSystemManager();
fs.writeFile({
filePath: wx.env.USER_DATA_PATH + "/" + fileName + '.pdf',
data: wx.base64ToArrayBuffer(pdfBase64.replace(/[\r\n]/g, "")),
success:res =>{
console.log(res)
wx.openDocument({
filePath: wx.env.USER_DATA_PATH + "/" + fileName+'.pdf',
success: function (res) {
console.log('打开PDF成功');
}, fail(err) {
console.log(err)
}
})
}
})
4、说明:
- wx.getFileSystemManager() 是获取文件管理器对象
- wx.env.USER_DATA_PATH + '/pic' + number + '.png'表示生成一个临时文件名
3、pdfBase64是后台接口返回的base64的数据流