title: encode/decode image with base64 breaks image
body: <p>I am trying to encode and decode an image. I am using the FileReader's readAsDataURL method to convert the image to base64. Then to convert it back I have tried using  <code>readAsBinaryString()</code> and <code>atob()</code> with no luck. Is there another way to persist images without base64 encoding them?</p>
  
  <blockquote>
    <p><strong>readAsBinaryString()</strong></p>
    
    <p>Starts reading the contents of the specified Blob, which may be a
    File. When the read operation is finished, the readyState will become
    DONE, and the onloadend callback, if any, will be called. At that
    time, the result attribute contains the raw binary data from the file.</p>
  </blockquote>
  
  <p>Any idea what I'm doing wrong here?</p>
  
  <p><strong>Sample Code</strong>
  <a href="http://jsfiddle.net/qL86Z/3/" rel="noreferrer">http://jsfiddle.net/qL86Z/3/</a></p>
  
  <pre><code>$("#base64Button").on("click", function () {
      var file = $("#base64File")[0].files[0]
      var reader = new FileReader();
  
      // callback for readAsDataURL
      reader.onload = function (encodedFile) {
          console.log("reader.onload");
          var base64Image = encodedFile.srcElement.result.split("data:image/jpeg;base64,")[1];
          var blob = new Blob([base64Image],{type:"image/jpeg"});
          var reader2 = new FileReader();
  
          // callback for readAsBinaryString
          reader2.onloadend = function(decoded) {
              console.log("reader2.onloadend");
              console.log(decoded); // this should contain binary format of the image
  
              // console.log(URL.createObjectURL(decoded.binary)); // Doesn't work
          };
          reader2.readAsBinaryString(blob);
  
          // console.log(URL.createObjectURL(atob(base64Image))); // Doesn't work
  
      };
      reader.readAsDataURL(file);
      console.log(URL.createObjectURL(file)); // Works
  });
  </code></pre>
  
  <p>Thanks!</p>