使用JSzip从URL保存图像

Question

我正在使用JSzip下载一个div的html。div里面有图像(它们不是base64编码的)。有没有办法可以使用JSzip从文件的图像路径url下载文件？或者它们必须是base64编码的？

我当前的代码只是来自JSzip站点(http://stuk.github.io/jszip/)的基本演示代码

    var zip = new JSZip();
    var email = $('.Result').html();
    zip.file("test.html", email);
    var content = zip.generate({type:"blob"});
    // see FileSaver.js
    saveAs(content, "example.zip");

Answer 1

您可能想尝试使用JSzip-utils，它有一个仅用于从urls下载图像的调用，也可以查看JSzip文档中的示例，我发现它非常好用。你可以找到工作中的example with code here.

这只是下载的一部分，我也在使用它们的图像源urls从社交媒体上下载图片。

function urlToPromise(url) {
return new Promise(function(resolve, reject) {
    JSZipUtils.getBinaryContent(url, function (err, data) {
        if(err) {
            reject(err);
        } else {
            resolve(data);
        }
    });
});
}
var zip = new JSZip();
zip.file(filename, urlToPromise(url), {binary:true});
zip.generateAsync({type:"blob"})
.then(function callback(blob) {

    // see FileSaver.js
    saveAs(blob, "example.zip");
});

Answer 2

首先，您需要使用ajax下载所有图像。如果它们在同一个域中，你就走运了，否则你需要CORS或代理。

var xhr = new XMLHttpRequest();

xhr.addEventListener('load', function(){
   if (xhr.status == 200){
      //Do something with xhr.response (not responseText), which should be a Blob
   }
});

xhr.open('GET', 'http://target.url');
xhr.responseType = 'blob';
xhr.send(null);

当你得到图像时，你必须操作所有<img>中的src，或者用base64替换它们，或者将它们放到一个文件夹中，如果你已经用JSZip将它们放在一个文件夹中

var reader = new FileReader();
reader.onload = function() {
    showout.value = this.result;
};
reader.readAsDataURL(xhr.response);

Answer 3

这是我的解决方案(改编自here)，在一个角度框架内构建(尽管很容易应用于其他前端方法)：

1. 注意:这只适用于打包来自同一来源的资源--甚至是图片--或者使用“跨源资源共享”：'*'

1. 确保JSZip UMD包含在您的全局命名空间中。在我的angular示例中，我通过npm i -S jszip保存了它，然后将node_modules/jszip/dist/jszip.js脚本复制到我的src/assets文件夹中，并将其包含在angular.json的脚本数组中。

仅适用于

1. Angular :要使jszip typescript定义文件正常工作，请将node_modules/jszip/index.d.ts复制到jszip中的某个位置

1. 下载npm i -S file-saver并将其作为ES6模块导入(见下文)。

当您希望发生下载事件时，

1. 运行以下函数：

import { saveAs } from 'file-saver';

async downloadData() {

    // Fetch the image and parse the response stream as a blob
    const imageBlob = await fetch('[YOUR CORS IMAGE URL]').then(response => response.blob());

    // create a new file from the blob object
    const imgData = new File([imageBlob], 'filename.jpg');

    // Copy-pasted from JSZip documentation
    var zip = new JSZip();
    zip.file('Hello.txt', 'Hello World\n');
    var img = zip.folder('images');
    img.file('smile.gif', imgData, { base64: true });
    zip.generateAsync({ type: 'blob' }).then(function(content) {
      saveAs(content, 'example.zip');
    });
  }