Created
October 12, 2014 13:41
-
-
Save nolanlawson/0eac306e4dac2114c752 to your computer and use it in GitHub Desktop.
Create an image/png blob, then fetch it with XHR
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (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(); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you so much! I had a similar implementation but the encoding was right. It turns out I was missing
xhr.responseType = 'arraybuffer';.