本文主要是介绍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方法来下载我们分解好的图集碎图文件。
这篇关于JavaScript原生实现图集分解并下载功能教程(三、使用JSZip压缩并下载分解好的碎图)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!