title: How can I convert image binary from API call to data URI in Javascript?
body: <p>The Google API I'm using is transmitting images only as binary data.</p>
  
  <p>I have absolutly no idea how to put this into a data URI to display it, thanks for any help! </p>
  
  <p>The call I'm talking about is <a href="http://code.google.com/apis/contacts/docs/2.0/developers_guide_protocol.html#retrieving_photo" rel="noreferrer">this API call</a>.</p>
  
  <p>As you can see, it says: </p>
  
  <blockquote>
    <p>The server returns bytes of the photo.</p>
  </blockquote>
  
  <p>For the call (it's an extension), I use the chrome_ex_oauth methods. Maybe I need to add something into the header to get real binary data, not string as it comes in right now...</p>
  
  <p>What I need to do is to convert the resulting binary into data URI so I can display it.</p>
  
  <hr>
  
  <p>Ok, I get this out of the XHR request</p>
  
  <p><img src="https://i.stack.imgur.com/UY3I6.png" alt="enter image description here"></p>
  
  <p>Now, I dont know binary stuff much. This is somehow encoded binary data i assume? I tried to put this into btoa and other base64 encoders, everything throws an error.
  I tried to overrideMimeType with different things and the "response" changed in some strange ways, but nothing accepts the data.</p>
  
  <p>So now I have this code:</p>
  
  <pre><code>var nxhr = new XMLHttpRequest();
  nxhr.onreadystatechange = function (data) {
      if (nxhr.readyState == 4) {
          console.log(nxhr);
      }
  };
  nxhr.open(method, url, true);
  nxhr.setRequestHeader('GData-Version', '3.0');
  nxhr.setRequestHeader('Authorization', oauth.getAuthorizationHeader(url, method, params));
  nxhr.send('Data to send');
  </code></pre>
  
  <p>Anybody else has any idea how to get this for me not understandable response into a data uri???</p>
  
  <p>Thanks for any help</p>