之前遇到圖片加載饰及，都是取到圖片的url地址之后直接賦值到img的src屬性即可；有需要驗(yàn)證token之類(lèi)的砰奕，直接在url后面添加參數(shù)蛛芥，如 ?token=***，也能夠正常加載军援。但是仅淑，當(dāng)token需要設(shè)置在Request Headers里，又需要如何處理呢胸哥？
獲取圖片
這里用獲取本地圖片來(lái)做演示：
function getImage(){
return new Promise(function(resolve,reject){
var request = new XMLHttpRequest()
request.onreadystatechange = function (e) {
if (e.target.readyState === 4) {
resolve(e.target.response)
}
}
request.open('get', 't1.jpeg') //open之前添加監(jiān)聽(tīng)事件
request.setRequestHeader('userToken','****') //假設(shè)這里需要token
request.send()
})
}
async function request() {
let res = await getImage()
console.log(res)
}
request()
可以在控制臺(tái)里看到涯竟，此處獲取到的是一堆亂碼的二進(jìn)制字節(jié)流：
顯然這些‘亂碼’無(wú)法像base64編碼一樣直接賦值給src來(lái)使用。
顯示圖片
查閱網(wǎng)上的資料空厌，找到對(duì)應(yīng)的解決方法：
1.設(shè)置responseType = 'blob'
2.利用URL.createObjectURL來(lái)生成DOMString
修改后的代碼如下：
function getImage(){
return new Promise(function(resolve,reject){
var request = new XMLHttpRequest()
request.onreadystatechange = function (e) {
if (e.target.readyState === 4) {
resolve(e.target.response)
}
}
request.open('get', 't1.jpeg') //open之前添加監(jiān)聽(tīng)事件
request.responseType = 'blob'
request.setRequestHeader('userToken','****') //假設(shè)這里需要token
request.send()
})
}
async function request() {
let res = await getImage()
console.log(res)
let url = window.URL.createObjectURL(res)
let img = new Image()
img.src = url
let box = document.getElementById('box')
box.appendChild(img)
}
request()
然后可以在頁(yè)面中看到加載的圖片庐船，如下圖：
及圖片的src的值為：
此時(shí)查看到請(qǐng)求返回的內(nèi)容為Bolb對(duì)象。
responseType
responseType是什么含義呢嘲更？是否可以設(shè)置為其它值呢醉鳖？
XMLHttpRequest.responseType 屬性是一個(gè)枚舉類(lèi)型的屬性，返回響應(yīng)數(shù)據(jù)的類(lèi)型哮内。它允許我們手動(dòng)的設(shè)置返回?cái)?shù)據(jù)的類(lèi)型。如果我們將它設(shè)置為一個(gè)空字符串，它將使用默認(rèn)的"text"類(lèi)型北发。
responseType有以下幾種類(lèi)型值：
text,一個(gè)以 DOMString 對(duì)象表示的文本,默認(rèn)值纹因。'',空字符串時(shí)，同默認(rèn)類(lèi)型text-
document琳拨，一個(gè)HTML Document或XML XMLDocument瞭恰，這取決于接收到的數(shù)據(jù)的MIME類(lèi)型
document -
blob,包含二進(jìn)制數(shù)據(jù)的Blob對(duì)象
arraybuffer -
arraybuffer,包含二進(jìn)制數(shù)據(jù)的 JavaScriptArrayBuffer
arraybuffer json,一個(gè) JavaScript 對(duì)象,通過(guò)將接收到的數(shù)據(jù)類(lèi)型視為 JSON 解析得到的ms-stream,下載流的一部分；此響應(yīng)類(lèi)型僅允許下載請(qǐng)求狱庇，并且僅受 Internet Explorer 支持
當(dāng)將responseType設(shè)置為一個(gè)特定的類(lèi)型時(shí)惊畏，你需要確保服務(wù)器所返回的類(lèi)型和你所設(shè)置的返回值類(lèi)型是兼容的
responseType類(lèi)型值之間存在兼容性，除了默認(rèn)的text類(lèi)型外密任，若設(shè)置的類(lèi)型和服務(wù)端返回的類(lèi)型不兼容颜启，則返回?cái)?shù)據(jù)為null，如修改上面代碼中的responseType的值：
request.responseType = 'json' //或者是 'document'
在控制臺(tái)打印出來(lái)的是null浪讳。
URL.createObjectUrl()
另一方面缰盏，URL.createObjectUrl()又有什么作用呢？
URL.createObjectURL() 靜態(tài)方法會(huì)創(chuàng)建一個(gè) DOMString淹遵，其中包含一個(gè)表示參數(shù)中給出的對(duì)象的URL口猜。這個(gè) URL 的生命周期和創(chuàng)建它的窗口中的 document 綁定。這個(gè)新的URL 對(duì)象表示指定的 File 對(duì)象或 Blob 對(duì)象透揣。
- 返回一個(gè)
DOMString -
DOMStriing中包含參數(shù)對(duì)象的URL - 該
URL可用于指定源Object的內(nèi)容
當(dāng)傳入的參數(shù)為File對(duì)象或Blob對(duì)象時(shí)济炎，返回的內(nèi)容如下：
另：文檔中雖然有提參數(shù)支持傳入MediaSouce對(duì)象，但在測(cè)試過(guò)程中辐真，卻出現(xiàn)了報(bào)錯(cuò)：
navigator.getUserMedia({ "video": true }, function (stream) {
url = window.URL.createObjectURL(stream)
}, function(){});
實(shí)際可以通過(guò)設(shè)置video的srcObject屬性為MediaSouce來(lái)直接顯示须尚。
video.srcObject = stream
video.play()
補(bǔ)充
和createObjectUrl對(duì)應(yīng)的是revokeObjectUrl,用來(lái)釋放一個(gè)之前已經(jīng)存在的、通過(guò)調(diào)用 URL.createObjectURL() 創(chuàng)建的 URL 對(duì)象拆祈。
revokeObjectUrl可以在 sourceopen 被處理之后的任何時(shí)候調(diào)用恨闪。
當(dāng)頁(yè)面被關(guān)閉的時(shí)候，瀏覽器會(huì)自動(dòng)釋放掉URL對(duì)象放坏×剩基于最佳性能和內(nèi)存使用，最好在不需要的時(shí)候手動(dòng)釋放掉淤年。
比如:
img.onload = function (){
window.URL.revokeObjectUrl(url)
}
如果是某div的背景圖钧敞，通過(guò)設(shè)置背景圖地址為img.src，并在觸發(fā)onload之后麸粮，設(shè)置setTimeout來(lái)進(jìn)行釋放操作溉苛。
