Skip to content

Instantly share code, notes, and snippets.

@nolanlawson

nolanlawson/index.html

Created September 3, 2014 15:56
Show Gist options
  • Save nolanlawson/b3fd59e4cf2b16c661cf to your computer and use it in GitHub Desktop.
Save nolanlawson/b3fd59e4cf2b16c661cf to your computer and use it in GitHub Desktop.
Download ZIP
Demonstrate an AJAX request for a blob URL of type image/png
Raw
index.html
<html>
<body>
<pre id="display"></pre>
<script src="//cdn.jsdelivr.net/pouchdb/3.0.3/pouchdb.js"></script>
<script>
(function () {
'use strict';
//
// main code starts here
//
var display = document.getElementById('display');
display.innerHTML = (display.innerHTML || '');
function log(text) {
display.innerHTML += "\n" + text;
}
var base64 = 'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB1klEQVR42n2TzytEURTHv3e8N1joRhZGzJsoCjsLhcw0jClKWbHwY2GnLGUlIfIP2IjyY2djZTHSMJNQSilFNkz24z0/Ms2MrnvfvMu8mcfZvPvuPfdzz/mecwgKLNYKb0cFEgXbRvwV2s2HuWazCbzKA5LvNecDXayBjv9NL7tEpSNgbYzQ5kZmAlSXgsGGXmS+MjhKxDHgC+quyaPKQtoPYMQPOh5U9H6tBxF+Icy/aolqAqLP5wjWd5r/Ip3YXVILrF4ZRYAxDhCOJ/yCwiMI+/xgjOEzmzIhAio04GeGayIXjQ0wGoAuQ5cmIjh8jNo0GF78QwNhpyvV1O9tdxSSR6PLl51FnIK3uQ4JJQME4sCxCIRxQbMwPNSjqaobsfskm9l4Ky6jvCzWEnDKU1ayQPe5BbN64vYJ2vwO7CIeLIi3ciYAoby0M4oNYBrXgdgAbC/MhGCRhyhCZwrcEz1Ib3KKO7f+2I4iFvoVmIxHigGiZHhPIb0bL1bQApFS9U/AC0ulSXrrhMotka/lQy0Ic08FDeIiAmDvA2HX01W05TopS2j2/H4T6FBVbj4YgV5+AecyLk+CtvmsQWK8WZZ+Hdf7QGu7fobMuZHyq1DoJLvUqQrfM966EU/qYGwAAAAASUVORK5CYII=';
var binary = PouchDB.utils.fixBinary(PouchDB.utils.atob(base64));
var blob = PouchDB.utils.createBlob([binary], {type: 'image/png'});
var url = URL.createObjectURL(blob);
log('Created a png blob of length: ' + blob.length);
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...');
PouchDB.utils.ajax({
url: url,
cache: true,
binary: true
}, function (err, res) {
log('Did we get an error?: ' + err);
log('Did we get a result?: ' + (res && JSON.stringify(res)));
log('The result content-type is: ' + (res && res.type));
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment