ajax請求二進位制流圖片並渲染到html中img標籤
阿新 • • 發佈:2019-01-03
說明
後臺返回圖片二進位制流,需要使用get請求獲取返回結果,並且將返回的二進位制流以圖片形式顯示在頁面img中。
但是日常顯示圖片都諸如這種形式:
<img src="圖片路徑、地址" alt="" />
以上需求不能將後端地址直接填入src(原因是需要獲取圖片請求的headers中欄位)
問題
後端返回圖片驗證碼,返回驗證碼的請求中的headers有一個Captcha-ETag:caf9f71eb9f511e78e41020563146d69,登入請求帶上它用來做驗證碼校驗。
所以,只能在get請求獲取,不能直接用直接img填寫圖片地址的方法。
解決
幾個關鍵點:
- responseType
設定值 | 返回型別 |
---|---|
“” | DOMString (this is the default value) |
“arraybuffer” | ArrayBuffer |
“blob” | Blob(二進位制流) |
“document” | Document |
“json” | JSON |
“text” | DOMString |
注意那個blob就是這種方案需要的responseType
- createObjectURL
URL.createObjectURL() 靜態方法會建立一個 DOMString,其中包含一個表示引數中給出的物件的URL。這個 URL 的生命週期和建立它的視窗中的 document 繫結。這個新的URL 物件表示指定的 File 物件或 Blob 物件。
objectURL = URL.createObjectURL(blob);
- revokeObjectURL
在每次呼叫 createObjectURL() 方法時,都會建立一個新的 URL 物件,即使你已經用相同的物件作為引數建立過。當不再需要這些 URL 物件時,每個物件必須通過呼叫 URL.revokeObjectURL() 方法來釋放。瀏覽器會在文件退出的時候自動釋放它們,但是為了獲得最佳效能和記憶體使用狀況,你應該在安全的時機主動釋放掉它們。
window.URL.revokeObjectURL(objectURL);
createObjectURL()方法,是接收一個檔案的引用返回一個URL物件。這是通知瀏覽器來建立和管理一個URL來載入檔案。 revokeObjectURL()方法,則是銷燬建立的URL,有效果釋放記憶體。當然,所有的URL物件將在瀏覽器重新載入時全部被銷燬,也有助於釋放它們佔用的記憶體。
最後demo:
URL 變數是原生瀏覽器物件的一個引用,假設瀏覽器支援URL物件,URL通過file建立一個物件賦值給imageUrl變數。 元素的onload 事件觸發後將銷燬URL 物件(一分鐘內),接著,給src屬性賦值後將追加到頁面上(你也可以使用一個頁面上已有的元素的)。
要及時銷燬URL物件,除非你有多個file需要使用,所以圖片載入完銷燬它是最佳記憶體釋放時機。
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","http://10.10.0.62:10001/api/charge/admin/v1/image/code",true);
xmlhttp.responseType = "blob";
xmlhttp.onload = function(){
console.log(this);
if (this.status == 200) {
var blob = this.response;
var img = document.createElement("img");
img.onload = function(e) {
window.URL.revokeObjectURL(img.src);
};
img.src = window.URL.createObjectURL(blob);
document.body.appendChild(img);
}
}
xmlhttp.send();
瀏覽器顯示:
<img src="blob:null/bccc301d-f2cd-4871-9349-daaac181d722">