nolanlawson/index.html

## index.html
<html>
<body>
  <h1>Create an image/png blob, then fetch it with XHR</h1>
  <pre id="display"></pre>
  <script src="index.js"></script>
</body>
</html>

## index.js
(function () {
  'use strict';

  // From http://stackoverflow.com/questions/14967647/ (continues on next line)
  // encode-decode-image-with-base64-breaks-image (2013-04-21)
  function fixBinary (bin) {
    var length = bin.length;
    var buf = new ArrayBuffer(length);
    var arr = new Uint8Array(buf);
    for (var i = 0; i < length; i++) {
      arr[i] = bin.charCodeAt(i);
    }
    return buf;
  }

  var display = document.getElementById('display');
  display.innerHTML = (display.innerHTML || '');
  function log(text) {
    display.innerHTML += "\n" + text;
  }
  var base64 =
    "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB1klEQVR42n2TzytEURTHv3e8N1joRhZG" +
    "zJsoCjsLhcw0jClKWbHwY2GnLGUlIfIP2IjyY2djZTHSMJNQSilFNkz24z0/Ms2MrnvfvMu8mcfZvPvu" +
    "Pfdzz/mecwgKLNYKb0cFEgXbRvwV2s2HuWazCbzKA5LvNecDXayBjv9NL7tEpSNgbYzQ5kZmAlSXgsGG" +
    "XmS+MjhKxDHgC+quyaPKQtoPYMQPOh5U9H6tBxF+Icy/aolqAqLP5wjWd5r/Ip3YXVILrF4ZRYAxDhCO" +
    "J/yCwiMI+/xgjOEzmzIhAio04GeGayIXjQ0wGoAuQ5cmIjh8jNo0GF78QwNhpyvV1O9tdxSSR6PLl51F" +
    "nIK3uQ4JJQME4sCxCIRxQbMwPNSjqaobsfskm9l4Ky6jvCzWEnDKU1ayQPe5BbN64vYJ2vwO7CIeLIi3" +
    "ciYAoby0M4oNYBrXgdgAbC/MhGCRhyhCZwrcEz1Ib3KKO7f+2I4iFvoVmIxHigGiZHhPIb0bL1bQApFS" +
    "9U/AC0ulSXrrhMotka/lQy0Ic08FDeIiAmDvA2HX01W05TopS2j2/H4T6FBVbj4YgV5+AecyLk+Ctvms" +
    "QWK8WZZ+Hdf7QGu7fobMuZHyq1DoJLvUqQrfM966EU/qYGwAAAAASUVORK5CYII=";

  var binary = fixBinary(atob(base64));
  var blob = new Blob([binary], {type: 'image/png'});
  var url = URL.createObjectURL(blob);
  log('Created a png blob of size: ' + blob.size);
  log('Inserting an img...');
  var img = document.createElement('img');
  img.src = url;
  document.body.appendChild(img);
  log('Blob URL is: ' + url);
  log('Fetching with ajax...');

  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType = 'arraybuffer';
  xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) {
      return;
    }
    log('xhr.status is: ' + xhr.status);
    log('returned content-type is: ' + xhr.getResponseHeader('Content-Type'));
    log('returned content-length is: ' + xhr.getResponseHeader('Content-Length'));

    var returnedBlob = new Blob([xhr.response], {type: 'image/png'});
    var reader = new FileReader();
    reader.onload = function(e) {
      var returnedURL = e.target.result;
      var returnedBase64 = returnedURL.replace(/^[^,]+,/, '');
      log('xhr.response (in base64) is: ' + returnedBase64);
      log('is this the expected base64? ' + (returnedBase64 === base64));
    };
    reader.readAsDataURL(blob); //Convert the blob from clipboard to base64
  };
  xhr.send();
})();
	<html>
	<body>
	<h1>Create an image/png blob, then fetch it with XHR</h1>
	<pre id="display"></pre>
	<script src="index.js"></script>
	</body>
	</html>
	(function () {
	'use strict';

	// From http://stackoverflow.com/questions/14967647/ (continues on next line)
	// encode-decode-image-with-base64-breaks-image (2013-04-21)
	function fixBinary (bin) {
	var length = bin.length;
	var buf = new ArrayBuffer(length);
	var arr = new Uint8Array(buf);
	for (var i = 0; i < length; i++) {
	arr[i] = bin.charCodeAt(i);
	}
	return buf;
	}

	var display = document.getElementById('display');
	display.innerHTML = (display.innerHTML \|\| '');
	function log(text) {
	display.innerHTML += "\n" + text;
	}
	var base64 =
	"iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB1klEQVR42n2TzytEURTHv3e8N1joRhZG" +
	"zJsoCjsLhcw0jClKWbHwY2GnLGUlIfIP2IjyY2djZTHSMJNQSilFNkz24z0/Ms2MrnvfvMu8mcfZvPvu" +
	"Pfdzz/mecwgKLNYKb0cFEgXbRvwV2s2HuWazCbzKA5LvNecDXayBjv9NL7tEpSNgbYzQ5kZmAlSXgsGG" +
	"XmS+MjhKxDHgC+quyaPKQtoPYMQPOh5U9H6tBxF+Icy/aolqAqLP5wjWd5r/Ip3YXVILrF4ZRYAxDhCO" +
	"J/yCwiMI+/xgjOEzmzIhAio04GeGayIXjQ0wGoAuQ5cmIjh8jNo0GF78QwNhpyvV1O9tdxSSR6PLl51F" +
	"nIK3uQ4JJQME4sCxCIRxQbMwPNSjqaobsfskm9l4Ky6jvCzWEnDKU1ayQPe5BbN64vYJ2vwO7CIeLIi3" +
	"ciYAoby0M4oNYBrXgdgAbC/MhGCRhyhCZwrcEz1Ib3KKO7f+2I4iFvoVmIxHigGiZHhPIb0bL1bQApFS" +
	"9U/AC0ulSXrrhMotka/lQy0Ic08FDeIiAmDvA2HX01W05TopS2j2/H4T6FBVbj4YgV5+AecyLk+Ctvms" +
	"QWK8WZZ+Hdf7QGu7fobMuZHyq1DoJLvUqQrfM966EU/qYGwAAAAASUVORK5CYII=";

	var binary = fixBinary(atob(base64));
	var blob = new Blob([binary], {type: 'image/png'});
	var url = URL.createObjectURL(blob);
	log('Created a png blob of size: ' + blob.size);
	log('Inserting an img...');
	var img = document.createElement('img');
	img.src = url;
	document.body.appendChild(img);
	log('Blob URL is: ' + url);
	log('Fetching with ajax...');

	var xhr = new XMLHttpRequest();
	xhr.open('GET', url);
	xhr.responseType = 'arraybuffer';
	xhr.onreadystatechange = function () {
	if (xhr.readyState !== 4) {
	return;
	}
	log('xhr.status is: ' + xhr.status);
	log('returned content-type is: ' + xhr.getResponseHeader('Content-Type'));
	log('returned content-length is: ' + xhr.getResponseHeader('Content-Length'));

	var returnedBlob = new Blob([xhr.response], {type: 'image/png'});
	var reader = new FileReader();
	reader.onload = function(e) {
	var returnedURL = e.target.result;
	var returnedBase64 = returnedURL.replace(/^[^,]+,/, '');
	log('xhr.response (in base64) is: ' + returnedBase64);
	log('is this the expected base64? ' + (returnedBase64 === base64));
	};
	reader.readAsDataURL(blob); //Convert the blob from clipboard to base64
	};
	xhr.send();
	})();