從XHR請求獲取BLOB數據

Question

var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'http://static.reddit.com/reddit.com.header.png', true); 

xhr.responseType = 'arraybuffer'; 

xhr.onload = function(e) { 
    if (this.status == 200) { 
    var uInt8Array = new Uint8Array(this.response); 
    var byte3 = uInt8Array[4]; 

    var bb = new WebKitBlobBuilder(); 
    bb.append(xhr.response); 
    var blob = bb.getBlob('image/png'); 
    var base64 = window.btoa(blob); 
    alert(base64); 

    } 
}; 

xhr.send(); 

基本上，我在這裏要做的是檢索圖像，並將其轉換爲base64。我們可以直接使用base64對文件/ blob進行編碼（window.btoa（）），這樣就可以實現對文件/ blob的編碼。 ）或FileReader.readAsDataURL（）。「

然而，blob只是[對象BLOB]，而我需要從圖像獲取二進制，所以我可以將其轉換爲Base64和使用數據的img標籤顯示它：

任何人都知道如何實現這個？

預先感謝您！

Answer 1

請勿在Chrome（在OSX的Chrome測試，火狐12，Safari瀏覽器6，iOS版Chrome瀏覽器，Safari瀏覽器的iOS）使用BlobBuilder：

EX1：http://jsfiddle.net/malraux/xGUsu/（原則）

EX2：http://jsfiddle.net/xGUsu/78/（有工作完整示例）

var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'doodle.png', true); 

xhr.responseType = 'arraybuffer'; 

xhr.onload = function(e) { 
    if (this.status == 200) { 
    var uInt8Array = new Uint8Array(this.response); 
    var i = uInt8Array.length; 
    var binaryString = new Array(i); 
    while (i--) 
    { 
     binaryString[i] = String.fromCharCode(uInt8Array[i]); 
    } 
    var data = binaryString.join(''); 

    var base64 = window.btoa(data); 

    document.getElementById("myImage").src="data:image/png;base64,"+base64; 
    } 
}; 

xhr.send(); 

Answer 2

您可以獲取Blob並使用window.URL.createObjectURL。這可以防止構建巨大的字符串並複製一切。

var xhr = new XMLHttpRequest(); 
 
xhr.open('GET', 'https://i.imgur.com/sBJOoTm.png', true); 
 

 
xhr.responseType = 'blob'; 
 

 
xhr.onload = function(e) { 
 
    if (this.status == 200) { 
 
var blob = this.response; 
 
document.getElementById("myImage").src = window.URL.createObjectURL(blob); 
 
    } 
 
}; 
 

 
xhr.onerror = function(e) { 
 
    alert("Error " + e.target.status + " occurred while receiving the document."); 
 
}; 
 

 
xhr.send();

<img id="myImage">

實施例（相同的碼）：http://jsfiddle.net/ysangkok/sJxXk/86/。適用於Firefox和Chrome 25+。和所有其他的瀏覽器，除了Opera Mini的：http://caniuse.com/#search=Blob

Answer 3

XMLHttpRequest

var xmlhttp = new XMLHttpRequest(); 
xmlhttp.open('GET', 'http://RestServiceURL-Returns Image', true); 
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded'); 
xmlhttp.responseType = 'arraybuffer/blob'; 
xmlhttp.send(); 

在3方面創造團塊圖像。

• window.URL。 createObjectURL
• FileReader（caniuse）

• Base64String

  xmlhttp.onload = function() { 
      var blob = new Blob([this.response], {type: 'image/png'}); 
      console.log(blob, blob.type, this.response, typeof this.response); 
  
      var image = document.getElementById('my-image'); 
  
      1)image.src = window.URL.createObjectURL(blob); 
  
      2)var fileReader = new window.FileReader(); 
      fileReader.readAsDataURL(blob); 
      fileReader.onloadend = function() { 
      image.src = fileReader.result; 
      } 
  
      3)var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(this.response))); 
      image.src = 'data:image/png;base64,'+base64String; 
  }; 
  

轉換ArrayBuffer到Blob到ArrayBuffer

1)var dataView = new DataView(arrayBuffer); 
var blob = new Blob([dataView], { type: mimeString }); 


2)fileReader.readAsArrayBuffer(blob); 
var arrayBuffer; 
fileReader.onload = function() { 
    arrayBuffer = this.result; 
}; 

Answer 4

相同的溶液通過的建議加諾言...

注意！使用createObjectURL時 - 不要忘記調用revokeObjectURL

// Load blob (promise) 
 
function loadBlob(url){ 
 
    return new Promise((resolve, reject) => { 
 
     const xhr = new XMLHttpRequest(); 
 
     xhr.open('GET', url, true); 
 
     xhr.responseType = 'blob';   
 
     xhr.onload =() => resolve(xhr.response); 
 
     xhr.onerror =() => reject(xhr.statusText);   
 
     xhr.send(); 
 
    }); 
 
} 
 

 
// Create image from blob (createObjectURL) 
 
function imageFromBlob(blob){ 
 
    const img = new Image(); 
 
    img.onload =() => URL.revokeObjectURL(img.src); 
 
    img.src = URL.createObjectURL(blob);  
 
    return img; 
 
} 
 

 

 
// Create image from blob if loaded successfully 
 
loadBlob('https://unsplash.it/960/540?random') 
 
    .then(blob => { 
 
     document.body.appendChild(imageFromBlob(blob));  
 
    }) 
 
    .catch(error => { 
 
     console.log('Could not load image'); 
 
    }) 
 
    
 

 

 
// Alternate version adding promise to xhr 
 
// if you like to trigger xhr.send() yourself 
 
function xhrBlob(url){ 
 
    const xhr = new XMLHttpRequest(); 
 
    xhr.open('GET', url, true); 
 
    xhr.responseType = 'blob';   
 
    xhr.promise = new Promise((resolve, reject) => { 
 
     xhr.onload =() => resolve(xhr.response); 
 
     xhr.onerror =() => reject(xhr.statusText); 
 
    }); 
 
    xhr.load = (onsuccess =() => {}, onerror =() => {}) => { 
 
     xhr.promise.then(onsuccess).catch(onerror); 
 
     xhr.send(); 
 
     return xhr; 
 
    } 
 
    return xhr; 
 
} 
 

 

 
// Using load callbacks 
 
xhrBlob('https://unsplash.it/960/540?random') 
 
    .load( 
 
     // on sussess 
 
     blob => { 
 
      document.body.appendChild(imageFromBlob(blob));  
 
     }, 
 
     // on error 
 
     error => { 
 
      console.log('Could not load image'); 
 
     } 
 
    ); 
 
    
 
// Using promise (delayed) 
 
const image = xhrBlob('https://unsplash.it/960/540?random'); 
 

 
    // Promise handlers 
 
    image.promise 
 
    .then(blob => { 
 
     document.body.appendChild(imageFromBlob(blob));  
 
    }) 
 
    .catch(error => { 
 
     console.log('Could not load image'); 
 
    }); 
 
    
 
// Load image (will trigger promise handlers) 
 
setTimeout(image.load, 3000);

img { 
 
    width: 100%; 
 
}