如何将jsZip用于位于同一服务器上的图像url

Question

这是我的问题，我无法通过Google搜索后使用jsZip来提取图像。我发现solution只能帮助我在页面加载开始时压缩文件。

这里是我的代码

<table class="table table-condensed" id="downloadTable"> 
      <thead> 
       <tr> 
        <th>Select</th> 
        <th>File name</th> 
        <th>Image</th> 
        <th>Option</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td> 
         <div class="checkbox"> 
          <input type="checkbox" id="file1" name="file" value="https://bibekshakya35.github.io/img/image-me.jpg" /> 
         </div> 
        </td> 
        <td>file1</td> 
        <td><a target="_self" href="https://bibekshakya35.github.io/img/image-me.jpg" class="btn btn-block" download="file1"/>file1</a></td> 
       </tr>       
       <tr> 
        <td> 
         <div class="checkbox"> 
          <input type="checkbox" name="file" id="file2" value="https://bibekshakya35.github.io/img/portfolio/bullock/2.JPG" /> 
         </div> 
        </td> 
        <td>file2</td> 
        <td><a target="_self" href="https://bibekshakya35.github.io/img/portfolio/bullock/2.JPG" class="btn btn-block" download="file2"/>file2</a></td> 
       </tr> 
       <tr> 
        <td> 
         <div class="checkbox"> 
          <input type="checkbox" name="file" id="file3" value="https://bibekshakya35.github.io/img/portfolio/bullock/3.JPG" /> 
         </div> 
        </td> 
        <td>file3</td> 
        <td><a target="_self" href="https://bibekshakya35.github.io/img/portfolio/bullock/3.JPG" class="btn btn-block" download="file3"/>file3</a></td> 
       </tr> 
       <tr> 
        <td> 
         <div class="checkbox"> 
          <input type="checkbox" name="file" id="file4" value="https://bibekshakya35.github.io/img/portfolio/bullock/4.JPG" /> 
         </div> 
        </td> 
        <td>file4</td> 
        <td><a target="_self" href="https://bibekshakya35.github.io/img/portfolio/bullock/4.JPG" class="btn btn-block" download="file4"/>file4</a></td> 
       </tr> 


      </tbody> 
     </table> 
<input type="button" id="lnk" onclick="alert(getCheckedCheckboxesFor('file'));" value="Get Values" /> 

这里是js代码

<script type="text/javascript"> 
      var images = []; 
      var counter = 0; 
      var values = []; 
      function getCheckedCheckboxesFor(checkboxName) { 

       var checkboxes = document.querySelectorAll('input[name="' + checkboxName + '"]:checked'), values = []; 
       Array.prototype.forEach.call(checkboxes, function (el) { 
        values.push(el.value); 
       }); 
       for (var i = 0; i < values.length; i++) { 
        convertImgToBase64URL(values[i], function (base64Img, url) { 
         images.push({ 
          url: url, 
          data: base64Img 
         }); 
         counter++; 
         if (counter === values.length) { 
          createArchive(images); 
         } 
        }); 
       } 

       return values; 




      } 

      function convertImgToBase64URL(url, callback, outputFormat) { 
       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(outputFormat); 
        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 < images.length; i++) { 
        img.file(images[i].url, images[i].data, {base64: true}); 
       } 
       var content = zip.generate({type: "blob"}); 

       // Use FileSaver.js 
       saveAs(content, "images.zip"); 
      } 

     </script> 

几个调试运行，我发现var content = zip.generate({type: "blob"});说内容类型取消定义之后。任何人有一个想法是什么问题？

Answer 1

你values变量是在getCheckedCheckboxesFor阴影和load被称为太早：

var values; // (1) global variable, equals to undefined 
function getCheckedCheckboxesFor(checkboxName) { 
    var values = []; // (2) shadowing the first one 
    // ... 
    values.push(el.value); // updates (2) 
    return values; // returns the correct array... which is not used 
} 

// ... 

(function load() { 
    // values here is (1), equals to undefined. values.length triggers an Error ! 
    if (index < values.length) { 
    // ... 
    } 
})(); // you call the function too early, you should wait for the user to click 

要解决它，你可以删除全局values变量和移动load点击回调中：

<input onclick="triggerDownload('file')" /> 

和

function triggerDownload(checkboxName) { 
    var values = getCheckedCheckboxesFor(checkboxName); 

    (function load() { 
    // ... 
    })(); 
} 

您也可以从类似于您的用例的文档中检查this example（和source code）。