JavaScript原生实现图集分解并下载功能教程（三、使用JSZip压缩并下载分解好的碎图）

-前言-

上一章我们使用了<a>标签的纯原生方法下载分解好的图集，虽然功能能够实现，不过下载下来的碎图不能在一个文件夹下，很蛋疼，因此本篇博客我们使用先压缩成zip的方式再下载下来。

如果没看过前两篇博客的同学也可以移步看看这个功能的具体实现：

https://blog.csdn.net/weixin_36719607/article/details/102623647

https://blog.csdn.net/weixin_36719607/article/details/102647690

完整项目地址：https://github.com/dengxuhui/ImagePackerWeb

如果想直接使用该功能的同学：http://dengxuhui.cn/

-正文-

在完成了所有图集上传分解功能后我们会得到有个imageDataAry的数组，数组成员为ImageData对象。我们本片博客就从这里开始写起。

引入JSZip.js及FileSaver.js

首先我们从网络上下载JSZip及FileSaver这两个js文件，并引入到index.html中

Github地址：https://github.com/Stuk/jszip

解析ImageData并保存到JSZip对象

/*** 通过jszip下载* @param {Array} imageDataAry */
downloadMethodByJSZip(imageDataAry) {var $this = this;var zip = new JSZip();for (var i = 0; i < imageDataAry.length; ++i) {$this.canvas.width = imageDataAry[i].width;$this.canvas.height = imageDataAry[i].height;$this.ctx.putImageData(imageDataAry[i], 0, 0);var base64 = $this.canvas.toDataURL("image/png", 1);base64 = base64.split(",")[1];zip.file($this.preFix + "_" + i + ".png", base64, { base64: true });}var blob = zip.generate({ type: "blob" });saveAs(blob, $this.preFix + ".zip");
}

上面我们还是首先获取单个碎图在Canvas中的数据并通过toDataURL获得base64数据。接着我们需要清洗返回的base64数据，把数据头中去掉，下面可以看看截取的原始base64数据

框内的字符串都是没有用的，我们只需要base64后的数据内容，因此使用字符串分割去得后面数据。

每个取得一个数据，我们就存到一个文件中，使用.file方法存储。

关于Base64数据我也有介绍：https://blog.csdn.net/weixin_36719607/article/details/102707249

生成blob并存储到本地

var blob = zip.generate({ type: "blob" });
saveAs(blob, $this.preFix + ".zip");

接下来我们生成blob并调用saveAs存储到本地。

官方提供的Demo是使用的一个异步方法来接收，不过我发现我下载中的JSZip中没有generateAsync这个方法，就直接使用了generate方法生成。

下面这个是官方demo实现方式

zip.generateAsync({type:"blob"})
.then(function(content) {    saveAs(content, $this.preFix + ".zip");
});

至此我们就实现了使用JSZip + FileSaver方法来下载我们分解好的图集碎图文件。