Skip to content

Instantly share code, notes, and snippets.

@Syrok

Syrok/index.html

Forked from nolanlawson/index.html
Created September 21, 2020 13:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Syrok/a95b3322ba80f052dc5005e35dfaf5c5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Syrok/a95b3322ba80f052dc5005e35dfaf5c5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @nolanlawson nolanlawson created this gist Oct 12, 2014.
    7 changes: 7 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    <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>
    65 changes: 65 additions & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    (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();
    })();