Javascript 使用JSzip从URL保存图像

我正在使用JSzip下载一个div的html。div中有图像（它们不是base64编码的）。有没有一种方法可以使用JSzip从它们的图像路径url下载文件？或者它们必须是base64编码的

我当前的代码只是来自JSzip站点（）的基本演示代码

---

首先，您需要使用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);

当您获得图像时，您必须操作所有

中的

src

，或者将它们替换为base64，或者将它们引用到一个文件夹中，或者将它们放在一个带有JSZip的文件夹中

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

---

您可能想尝试使用它，它有一个仅用于从URL下载图像的调用。另外，请查看文档中的示例，我发现它非常好。你可以找到工作

这只是下载的一部分，我还使用它从社交媒体下载图像，使用它们的图像源URL

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

以下是我的解决方案（改编自）在角度框架内构建（尽管很容易适用于其他前端方法）：

注意：仅当您正在打包来自同一来源的资源（甚至是图像）或提供“跨来源资源共享”的资源时，此选项才有效：“*”

确保JSZip UMD包含在您的全局命名空间中。在angular的例子中，我通过

npmi-sjszip

保存它，然后将

node\u modules/jszip/dist/jszip.js

脚本复制到我的

src/assets

文件夹中，并将其包含在angular.json的脚本数组中

仅角度：要使jszip类型脚本定义文件正常工作，请将

node\u modules/jszip/index.d.ts

复制到

src

下载npm i-S文件保护程序，并将其作为ES6模块导入（见下文）

如果希望发生下载事件，请运行以下函数：

---

你救了我！谢谢我在我的chrome扩展中使用此代码！巧合的是，我也在我的Chrome扩展上使用它。非常感谢。

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

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