二進制圖像從服務器加載到圖像與JavaScript

我正在從我的服務器通過XMLHttpRequest以二進制格式加載jpeg圖像（我需要它）。它不是base64編碼的。二進制圖像從服務器加載到圖像與JavaScript

是否有可能將它變成一個img對象與JavaScript？

感謝

2012-12-10 Marc

如果XMLHttpRequest的字符編碼已被設置爲something that won't change the binary data，或者你set the response type，你可以再通過btoa（把它用base64，讓你將其指定爲數據URI）運行.responseText或分別訪問.response二進制數據。

假設你的實例名爲xhr和你正在使用的字符集方法xhr.send之前，但xhr.open後做

xhr.overrideMimeType("text/plain; charset=x-user-defined");

那麼當你200 OK

var dataURI = 'data:image/jpeg;base64,' + btoa(xhr.responseText);

，你可以然後設置爲<img>的src。

再次假設xhr，此時.response方法; .open和.send然後在200 OK之間，

xhr.responseType = "arraybuffer";

var arrayBufferView = new Uint8Array(xhr.response), // can choose 8, 16 or 32 depending on how you save your images 
    blob = new Blob([arrayBufferView], {'type': 'image\/jpeg'}), 
    objectURL = window.URL.createObjectURL(blob);

然後你就可以設置爲<img>的SRC。 Example

來源

2012-12-10 20:04:10

這被稱爲嵌入式圖像。請注意，IE8僅支持小於32 KB的內嵌圖像（對於base64編碼數據，因此源圖像必須小於24 KB），IE7和更早版本根本不支持內嵌圖像（如果那樣的話）。 –

試過，但'btoa（xhr.responseText）'一直返回'錯誤：INVALID_CHARACTER_ERR：DOM異常5'。我找不到爲什麼會發生這種情況。對於IE7/IE8 ...我將不得不做一個Flash對象來處理它grrr – Marc

@Marc發生這是因爲'btoa'有一些[bug]（https://bugzilla.mozilla.org/show_bug.cgi？ id = 213047）（相同/相似也適用於webkit），我會用_ArrayBuffer_ - >'Blob' - >通過_URL.createObjectURL_方法更新答案，在我看來，它比通過_FileReader_稍好一些，但仍然不夠好作爲_btoa_。 –

二進制圖像從服務器加載到圖像與JavaScript

回答

相關問題