微信小程序將圖片數據流添加到image標簽中


原文: https://blog.csdn.net/OliveLao/article/details/78136121

----------------------------------------

有時候我們通過API接口獲取圖片時,拿到的是圖片的數據流:有可能是二進制數據流,也可能是base64編碼的數據流。

data: {
captchaImage: '../../images/captcha.png', // 如果需要的話,可以給張默認的圖片先
},


當獲取到的是原始的圖片二進制數據流時,只需要將image標簽的src直接設置為圖片url就可以,如:
var that = this
var url = constants.WEB_SERVER_DOMAIN + '/getImage'
console.log(url)
that.setData ({
captchaImage: url,
})

當獲取到的是圖片的base64編碼的數據流時,需要將接口獲取到的數據再解析base64編碼,如:
wx.request({
url: constants.WEB_SERVER_DOMAIN + '/getImage',
method: 'GET',
header: {
'content-type': 'application/octet-stream',
},
success: function (res) {
//console.log(res.data)
var data = res.data
console.log(res.statusCode)
if (res.statusCode == 200) {
that.setData ({
captchaImage: 'data:image/png;base64,' + data, // data 為接口返回的base64字符串
})
}
},

注意:上面解析base64時,在數據流前面加上  data:image/png;base64,  (注意是有個“,”) 。image/png改為對應的圖片類型,如 image/gif, image/jpg等。


然后在wxml文件中,使用image標簽,如:

<image src="{{captchaImage}}" style="width:100px;height:44px;" ></image>
---------------------
作者:OliveLao
來源:CSDN
原文:https://blog.csdn.net/OliveLao/article/details/78136121
版權聲明:本文為博主原創文章,轉載請附上博文鏈接!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM