Skip to content

Instantly share code, notes, and snippets.

@nolanlawson
Created October 12, 2014 13:41
Show Gist options
  • Save nolanlawson/0eac306e4dac2114c752 to your computer and use it in GitHub Desktop.
Save nolanlawson/0eac306e4dac2114c752 to your computer and use it in GitHub Desktop.
Create an image/png blob, then fetch it with XHR
<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();
})();
@CovorSorin
Copy link

Thank you so much! I had a similar implementation but the encoding was right. It turns out I was missing xhr.responseType = 'arraybuffer';.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment