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

Basicamente, o que estou tentando fazer aqui é recuperar uma imagem e convertê-la em base6

De ler nos comentáriosaqu, afirma "Claro. Depois de buscar um recurso como um ArrayBuffer, crie um blob a partir dele. Depois disso, você poderá codificar o arquivo / blob com base64 diretamente (window.btoa ()) ou FileReader.readAsDataURL ()."

Contudo,blob é apenas [objeto blob], enquanto eu preciso obter o binário da imagem para convertê-lo em base64 e exibi-lo em uma tag img usando dados:

Alguém sabe como conseguir isso?

Agradeço antecipadamente