1娜遵、使用image標(biāo)簽
src屬性添加data:image/png;base64
(注意:若imgData返回?cái)?shù)據(jù)中含有data:image/png;base64,時(shí)挑随,src直接寫src="{{imgData}}"即可)
<image src="data:image/png;base64,{{imgData}}"></image>
顯示不出來憾股,有一種原因是因?yàn)榉祷氐腷ase64的數(shù)據(jù)中存在回車換行榴芳,需要回車換行替換為''即可延欠。
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, //設(shè)置data里面的圖片url
})
},
fail(res){
}
})
wxml里面代碼如下:
<view>
<image src='{{codeUrl}}'></image>
</view>
2手形、如何保存
(注意:若imgData返回?cái)?shù)據(jù)中含有data:image/png;base64,時(shí),data參數(shù)需要寫成: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打開預(yù)覽
用wx.base64ToArrayBuffer()將 Base64 字符串轉(zhuǎn)成 ArrayBuffer 對(duì)象并去空格,再寫入文件疲酌,最后打開蜡峰。
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() 是獲取文件管理器對(duì)象
- wx.env.USER_DATA_PATH + '/pic' + number + '.png'表示生成一個(gè)臨時(shí)文件名
3朗恳、pdfBase64是后臺(tái)接口返回的base64的數(shù)據(jù)流