Edit in JSFiddle

var zip = new JSZip(),
  $img = $('#img'),
  $text = $('#text'),
  $type = $('#type'),
  $gen = $('#gen');
  
JSZipUtils.getBinaryContent('https://cors-anywhere.herokuapp.com/' + $img.attr('src'), function(err, data) {
  if (err) {
    throw err; // or handle the error
  }
  zip.file("cover.png", data, {
    binary: true
  });
});

$gen.click(function(e) {
  e.preventDefault();
  console.log($type.val());
  zip.file('demo' + $type.val(), $text.val());
  zip.generateAsync({
      type: "blob"
    })
    .then(function(content) {
      saveAs(content, "example.zip");
    })
});
<p>
  <img src="https://i.imgur.com/EiBHnCL.png" alt="cosplay" id="img">
</p>
<p>
  <textarea name="text" id="text" cols="30" rows="10"></textarea>
</p>
<p>
  <select name="type" id="type">
    <option value="" selected>text/plain</option>
    <option value=".css">text/css</option>
    <option value=".html">text/html</option>
    <option value=".xml">application/xml</option>
    <option value=".opf">application/oebps-package+xml</option>
  </select>
</p>
<p>
  <button id="gen">Generate</button>
</p>
img {
  display: none;
}