同じサーバーにある画像URLにjsZipを使用する方法

Question

これは私の問題です。グーグルで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）も、使用例に似たドキュメントからチェックすることができます。