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

Question

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

我的意思是...

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

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

是否可以通过http://mysite.com上的Java脚本代码将所有这些文件作为压缩文件归档images.zip ？

我找到了JSZip,但我不知道如何使用它来加载来自不同服务器的文件.

Answer 1

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

首先,我们需要将图像添加到<img>标签中.然后我们将阅读它们的内容.然后所有都可以通过jszip完成.

但也有局限性.您无法从其他域加载图像.所以图像应该在同一个URL中,或者通过服务器端动态加载它们,如: http://yourdomain.com/fileLoader.php?url=Url_To_External_Image

这是执行魔术的代码snipee:

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;
    }
});