之前遇到圖片加載，都是取到圖片的url地址之后直接賦值到img的src屬性即可；有需要驗證token之類的，直接在url后面添加參數(shù)，如 ?token=***，也能夠正常加載。但是，當token需要設置在Request Headers里，又需要如何處理呢？

獲取圖片

這里用獲取本地圖片來做演示：

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)聽事件
        request.setRequestHeader('userToken','****')  //假設這里需要token
        request.send()
    })
}

async function request() {
    let res = await getImage()
    console.log(res)
}

request()

可以在控制臺里看到，此處獲取到的是一堆亂碼的二進制字節(jié)流：

response

顯然這些‘亂碼’無法像base64編碼一樣直接賦值給src來使用。

顯示圖片

查閱網(wǎng)上的資料，找到對應的解決方法：

1.設置responseType = 'blob'

2.利用URL.createObjectURL來生成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)聽事件
        request.responseType = 'blob'
        request.setRequestHeader('userToken','****')  //假設這里需要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()

然后可以在頁面中看到加載的圖片，如下圖：

加載后的圖片

及圖片的src的值為：

src

此時查看到請求返回的內(nèi)容為Bolb對象。

responseType

responseType是什么含義呢？是否可以設置為其它值呢？

XMLHttpRequest.responseType 屬性是一個枚舉類型的屬性，返回響應數(shù)據(jù)的類型。它允許我們手動的設置返回數(shù)據(jù)的類型。如果我們將它設置為一個空字符串，它將使用默認的"text"類型。

responseType有以下幾種類型值：

• text,一個以 DOMString 對象表示的文本,默認值。

• '',空字符串時，同默認類型text

• document，一個 HTML Document 或 XML XMLDocument，這取決于接收到的數(shù)據(jù)的 MIME 類型
  

  document

• blob,包含二進制數(shù)據(jù)的 Blob 對象
  

  arraybuffer

• arraybuffer,包含二進制數(shù)據(jù)的 JavaScript ArrayBuffer
  

  arraybuffer

• json,一個 JavaScript 對象,通過將接收到的數(shù)據(jù)類型視為 JSON 解析得到的

• ms-stream,下載流的一部分；此響應類型僅允許下載請求，并且僅受 Internet Explorer 支持

當將responseType設置為一個特定的類型時，你需要確保服務器所返回的類型和你所設置的返回值類型是兼容的

responseType類型值之間存在兼容性，除了默認的text類型外，若設置的類型和服務端返回的類型不兼容，則返回數(shù)據(jù)為null，如修改上面代碼中的responseType的值：

request.responseType = 'json'  //或者是 'document'

在控制臺打印出來的是null。

URL.createObjectUrl()

另一方面，URL.createObjectUrl()又有什么作用呢？

URL.createObjectURL() 靜態(tài)方法會創(chuàng)建一個 DOMString，其中包含一個表示參數(shù)中給出的對象的URL。這個 URL 的生命周期和創(chuàng)建它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。

• 返回一個DOMString
• DOMStriing中包含參數(shù)對象的URL
• 該URL可用于指定源Object的內(nèi)容

當傳入的參數(shù)為File對象或Blob對象時，返回的內(nèi)容如下：

URL.createObjectUrl()返回值

另：文檔中雖然有提參數(shù)支持傳入MediaSouce對象，但在測試過程中，卻出現(xiàn)了報錯：

navigator.getUserMedia({ "video": true }, function (stream) {
    url = window.URL.createObjectURL(stream)
}, function(){});

參數(shù)為MediaSouce對象時

實際可以通過設置video的srcObject屬性為MediaSouce來直接顯示。

video.srcObject = stream
video.play()

補充

和createObjectUrl對應的是revokeObjectUrl,用來釋放一個之前已經(jīng)存在的、通過調(diào)用 URL.createObjectURL() 創(chuàng)建的 URL 對象。
revokeObjectUrl可以在 sourceopen 被處理之后的任何時候調(diào)用。
當頁面被關閉的時候，瀏覽器會自動釋放掉URL對象?；谧罴研阅芎蛢?nèi)存使用，最好在不需要的時候手動釋放掉。
比如:

img.onload = function (){
    window.URL.revokeObjectUrl(url)
}

如果是某div的背景圖，通過設置背景圖地址為img.src，并在觸發(fā)onload之后，設置setTimeout來進行釋放操作。