javascript - 是否可以在从其他服务器下载之前动态压缩文件？

Question

我想知道是否可以编写浏览器扩展程序或简单的 Java 脚本代码，其中包含指向不同位置的 URL 列表，可以将所有内容压缩在一起。

我是说...

例如...有 3 个不同的图像文件：

• http://example1.com/a.png
• http://example22.com/b.png
• http://example333.com/c.png

是否可以通过http://mysite.com上的 Java Script 代码将它们全部下载为压缩文件存档 images.zip ？

我找到了 JSZip，但是我不知道如何使用它从不同的服务器加载文件。

Answer 1

看一下这段代码：我已经为你组装了一个Demo，让你从那里开始。向下滚动到代码的最后几行。

首先，我们需要将图像加载到<img>标签中。然后我们将阅读它们的内容。然后一切都可以通过jszip完成。

但有一些限制。您不能从其他域加载图像。所以图像应该在相同的 url 中，或者您通过服务器端动态加载它们，例如： http://yourdomain.com/fileLoader.php?url=Url_To_External_Image

这是执行魔术的代码狙击手：

function getBase64Image(imgage) {
    var canvas = document.createElement("canvas");
    canvas.width = imgage.width;
    canvas.height = imgage.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgage, 0, 0);

    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

var img = $("<img />").attr('src', '../../../img/logo.png');

img.load(function() {
    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
        alert('broken image!');
    }
    else {
        var zip = new JSZip();
        content = getBase64Image(img[0]);
        zip.file("24.jpg", content + "\n");
        var content = zip.generate();
        location.href="data:application/zip;base64,"+content;
    }
});