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

Question

ここに私の問題がありjsZipます。グーグルを使用して画像を抽出することはできません。ページの読み込みの最初にファイルを圧縮するのに役立つソリューションを見つけました。

ここに私のコードがあります

<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"});何度かデバッグした後、コンテンツタイプが未定義であることがわかりました。何が問題なのか誰にも分かりますか？