转换图像链接到base64并使用JSZip将它们添加到zip文件

Question

所以基本上我想添加一些图像到zip文件，并能够下载它。 我有两个变量来保存图像源 - pic1， pic2和一个用于保存base64字符串的全局变量basePic 。 我有一个将图像转换为base64的功能：

var pic; //http://www.somesite.com/i/picture.jpg
var pic2; //http://www.somesite.com/i/picture2.jpg
var basePic;// base64 string of an image

function getBase64FromImageUrl(url) {
    var img = new Image();
    img.setAttribute('crossOrigin', 'anonymous');

    img.onload = function () {
    var canvas = document.createElement("canvas");
    canvas.width =this.width;
    canvas.height =this.height;

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

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

    img.src = url; // I was trying to put this after setAttribute, but it's the same effect
    }

后来我正在尝试创建一个zip文件并调用这个函数：

var zip = new JSZip();

getBase64FromImageUrl(pic);
alert("random text"); // without it, it's just empty file added to zip
zip.file("picture.png",basePic, {base64: true});

getBase64FromImageUrl(pic2);
alert("random text");
zip.file("picture2.png",basePic, {base64: true});

zip.generateAsync({type:"blob"})
.then(function(content) {
saveAs(content, "example.zip");
});

此功能适用于一个图像，但随着多个图像变得更随机。 如果我在没有刷新页面的情况下运行我的代码几次，它可能会得到我需要的结果。 但是我的zip文件中的大部分时间只是第二张图片两次，我必须在调用此函数后发出警告 ，因为basePic将为空而没有。 我想修复此功能，以便轻松地将多个图像源转换为base64字符串。

1.如何使这个功能正常工作，input_url - > output_base64，有多个图像？

2.如果不需要在每次调用该函数后发出警告，该怎么做？

Answer 1

问题是压缩过程在图像加载之前开始。 将文件添加到zip存档的过程必须从onload处理程序内部开始。

但是，这里有几件事要考虑：

• 如果要按原样将图像添加到存档，则无需通过画布
• 转换为Data-URI和从Data-URI转换非常昂贵且内存成本高昂。 JSZip在内部使用pako_delate，对于类型化数组视图（ Uint8Array ）效果更好

我建议采用以下方法：

• 在应用程序开头（或开始加载文件之前）创建zip对象
• 使用XMLHttpRequest加载每个文件并将内容请求为ArrayBuffer 。 这将允许您将任何类型的文件直接加载到二进制格式，这将提高性能和资源。
• 添加文件
• 传递所有URL时，请调用generateAsync()方法，您应该完成。

例

这不是一个生产就绪的例子，并不打算如此，但它将显示主要步骤。 调整您的方案，在适当的时候添加错误处理和健全性检查。

 // create archive before loading process begin var zip = new JSZip(); // image list to add: var images = [ "//i.imgur.com/qDFCWVnb.jpg", "//i.imgur.com/VBvzEq1b.jpg", "//i.imgur.com/ZWtUEuLb.jpg" ], index = 0; // for loader // function to load a single image as arraybuffer using XMLHttpRequests // it will assume cross-origin usage is allowed function loadAsArrayBuffer(url, callback) { var xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.responseType = "arraybuffer"; xhr.onerror = function() {/* handle errors*/}; xhr.onload = function() { if (xhr.status === 200) {callback(xhr.response, url)} else {/* handle errors*/} }; xhr.send(); } // loading process. Here it will load one and one image. // You can modify it to load several at once but some browsers put // a cap on how many XHR connections can be open at the same time.. (function load() { if (index < images.length) { loadAsArrayBuffer(images[index++], function(buffer, url) { var filename = getFilename(url); zip.file(filename, buffer); // image has loaded, add it to archive load(); // load next image }) } else { // done! present archive somehow zip.generateAsync({type:"blob"}).then(function(content) { // save out lnk.href = (URL || webkitURL).createObjectURL(content); lnk.innerHTML = "Right-click + Save as to download zip file"; lnk.download = "DemoZip.zip"; }); } })(); // Just for this demo! keep separate array with filename or // modify to allow for "filename-less" uris. function getFilename(url) { return url.substr(url.lastIndexOf("/") + 1) } 

 <script src="https://raw.githubusercontent.com/Stuk/jszip/master/dist/jszip.min.js"></script> Loading external lib + images... hold on... <br><a id=lnk></a>