title: put multiple files in a zip file and download it using javascript
body: <p>I have multiple image addresses. The address looks like <a href="https://tmp.ocpu.io/x05fcaa7ec4/graphics/last/png?width=800&amp;height=600" rel="nofollow">https://tmp.ocpu.io/x05fcaa7ec4/graphics/last/png?width=800&amp;height=600</a>.</p>
  
  <p>Above address may expire after 24 hours. So please just use following two addresses. 
  <a href="http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg" rel="nofollow">http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg</a> and <a href="https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg" rel="nofollow">https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg</a>.</p>
  
  <p>I want to build a website that puts these two images (addresses) into a zip file and users can download the zip file. I don't know if this is possible but my following code works partially and I can download the zip file but it is just I can't open it with any image viewer software. Please help, thanks!</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;title&gt;Zipper&lt;/title&gt;
      &lt;script src="jszip.min.js"&gt;&lt;/script&gt;
      &lt;script src="stat_FileSaver.min.js"&gt;&lt;/script&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
  
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>and <strong>JavaScript</strong> (the script.js)</p>
  
  <pre><code>var urls = [
    'http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg',
    'https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg'
  ];
  var images = [];
  var counter = 0;
  
  // From http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript
  function convertImgToBase64URL(url, callback){
      var img = new Image();
      img.crossOrigin = 'Anonymous';
      img.onload = function(){
        var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'), dataURL;
        canvas.height = this.height;
        canvas.width = this.width;
        ctx.drawImage(this, 0, 0);
        dataURL = canvas.toDataURL();
  
        callback(dataURL, url);
        canvas = null;
      };
      img.src = url;
  }
  
  function createArchive(images){
    // Use jszip
    var zip = new JSZip();
    var img = zip.folder("images");
  
    for (var i=0; i&lt;images.length; i++) {
      img.file(i+".jpg", images[i].data, {base64: true}); 
    }
        zip.generateAsync({type:"blob"}).then(function(file){
          saveAs(file, "images.zip");
  
        })
  
  }
  
  for (var i = 0; i&lt;urls.length; i++) {
    convertImgToBase64URL(urls[i], function (base64Img, url) {
      images.push({
        url: url,
        data: base64Img
      });
      counter++;
  
      if (counter == urls.length) {
        createArchive(images);
      }
    });
  }
  </code></pre>