javascript - 如何使用 jsZip 作为驻留在同一服务器上的图像 url

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 )来自与您的用例类似的文档。