एक्सएचआर अनुरोध से बीएलओबी डेटा प्राप्त करना

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(); 

असल में, जो मैं यहां करने की कोशिश कर रहा हूं वह एक छवि पुनर्प्राप्त कर रहा है, और इसे बेस 64 में परिवर्तित कर रहा है।

टिप्पणी here में पढ़ने से, यह "कहा गया है ज़रूर। एक ArrayBuffer के रूप में एक संसाधन प्राप्त करने के बाद, इसमें से एक ब्लॉब पैदा करते हैं। एक बार जब आप गए हैं, आपको base64 फ़ाइल/ब्लॉब सीधे सांकेतिक शब्दों में बदलना सकता है (window.btoa()) या FileReader.readAsDataURL()। "

किसी को भी पता है कि प्राप्त करने के लिए:

हालांकि, blob बस [वस्तु ब्लॉब], जबकि मैं छवि से बाइनरी पाने के लिए तो मैं यह बेस 64 में बदल जाएंगे और डेटा का उपयोग कर एक img टैग में प्रदर्शित कर सकता है की जरूरत है इस?

अग्रिम धन्यवाद!

Answer 1

क्रोम (OSX क्रोम में परीक्षण किया, फायरफॉक्स 12, सफारी 6, 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/। फ़ायरफ़ॉक्स और क्रोम 25+ में काम करता है। और ओपेरा मिनी को छोड़कर अन्य सभी ब्राउज़रों: 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; 
  }; 
  

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

एक ही समाधान ArrayBuffer को Blob को ArrayBuffer परिवर्तित रूपने सुझाव दिया वचन के साथजोड़ा गया ...

नोट! जब 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%; 
 
}