Read file to blob and display in javascript
<p>So I'm trying to create a basic prototype of a functionality. Essentially the end goal is to receive a Base64 encoded string and a support mime type and generate the file and serve it up from a HTML 5 APP. For now I'm working on simple getting a file, turning it into a Blob, and then displaying it, all from memory. </p>

<pre><code>   var blobfile = atob(base64);
   window.blobFromBlob = new Blob([binaryString], {
     type: MIMEType
   });
   window.blobURL = URL.createObjectURL(window.blobFromBlob);
   var a = "&lt;a href=\"" + window.blobURL + "\"&gt;Binary Blob Link&lt;/a&gt;";
   document.getElementById('byte_content').innerHTML = a;
</code></pre>

<p>I've created a <a href="https://jsfiddle.net/ajwhiteway/nuvc120h/" rel="nofollow">JSFiddle</a> to show what I'm having trouble with. When I put, say a JPEG, into it and then try to serve it up the img tags show corrupt images. The Base64 blob I never expect to work, but the Binary blob and blob from base 64 I do expect to work.</p>

<p>Can anyone see where I'm going wrong?</p>

<p>Thanks!</p>

<p>NOTE: I managed to get the binary one to display by changing from <code>readAsBinaryString</code> to <code>readAsArrayBuffer</code></p>

<p>NOTE 2: I'm beginning to suspect it has something to do with <code>atob</code> and <code>btoa</code></p>