Get data url of an image using xhr

xhrImageDataUrl.js

var url = 'path/to/image/file' ;

var xhr = new XMLHttpRequest();

xhr.open('GET', url, true);

// Set responseType to 'arraybuffer', we want raw binary data buffer
xhr.responseType = 'arraybuffer';

xhr.onload = function() {
  // Create an array of 8-bit unsigned integers
  var arr = new Uint8Array(this.response);
  
  // String.fromCharCode returns a 'string' from the specified sequence of Unicode values
  var raw = String.fromCharCode.apply(null, arr);
  
  //btoa() creates a base-64 encoded ASCII string from a String object 
  var b64 = btoa(raw);
  
  var dataType = 'yourImageDataType';
  //ta-da your image data url!
  var dataURL = 'data:image/' + dataType + ';base64,' + b64;
  
};

xhr.send();