title: Load image with Filereader API and zip it using JSZip
body: <p>I'm trying to load an image using fileready api, save it in a newly made zip file made using jszip, with the name <code>logo.png</code>. My problem is getting the image to save in the zip from filereader.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
    $(".load").on("change", function(evt) {
      var file = evt.target.files;
      var reader = new FileReader();
  
      reader.onload = (function(event) {
        return function(e) {
          var imgBinary = e.target.result;
          var imgz = new Image();
          imgz.attr("src", event.target.result);
          imgz.attr("width", 128);
          imgz.attr("height", 128);
          holder.html("");
          holder.append(imgz);
        };
      });
      reader.readAsDataURL(file);
      // reader.readAsArrayBuffer(file);
  
      // Download Zip
      $(".download").on("click", function() {
        var zip = new JSZip();
        zip.load(webAppZipBinary);
        zip.file("Hello.txt", "Hello World\n");
        var content = zip.generate({type:"blob"});
        // see FileSaver.js
        saveAs(content, theFile.name.substr(theFile.name.length - theFile.name.length, theFile.name.length - 4) + "-win.zip");
      });
  
      return false;
    });
  
  
    // Trigger Load Image
    $(".trigload").click(function() {
      $("input").trigger("click");
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url("http://necolas.github.io/normalize.css/3.0.1/normalize.css");
  
  .hide {
    display: none;
  }
  
  .holder {
    text-align: center;
  }
  
  .fr {
    float: right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://stuk.github.io/jszip/dist/jszip.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://stuk.github.io/jszip-utils/dist/jszip-utils.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://stuk.github.io/jszip/vendor/FileSaver.js"&gt;&lt;/script&gt;
  
  &lt;input type="file" class="hide"&gt;
  &lt;a class="trigload" href="javascript:void(0)"&gt;Load Image&lt;/a&gt;
  &lt;a class="download fr" href="javascript:void(0)"&gt;Download&lt;/a&gt;
  &lt;div class="holder"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>