因为canvas总结到后面又想到了jszip的一些事情，那就索性也回去看看吧。试过，至少谷歌和火狐都是支持jszip的。
1、 jszip的使用
官方文档说的很清楚了，而且也有读取zip文件、生成zip文件下载的js代码示例，下面就简单说说吧。
<1>读取zip文件，一般用于上传zip文件后读取内容，不过我懒得写input结构，并没有实现，只是了解一下，官网文档有相关说明。
//****读取zip文件，可以用在文件上传时，content就需要传入一个file var new_zip = new JSZip(); new_zip.loadAsync(content) .then(function(zip) { new_zip.file("hello.txt").async("string")；//读取压缩包后可以读取其中文件的内容 });
<2>在压缩包中生成文件夹文件并下载
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="js/jszip.min.js"></script>
<script src="js/FileSaver.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<button id="download">下载</button>
<script>
window.onload=function(){
document.getElementById('download').onclick = function(){
var zip = new JSZip();//*****创建实例，zip是对象实例
//********在zip中创建和更新文件/文件夹
zip.file("hello.txt", "Hello World1
");//创建一个文件
zip.file("hello.txt", "aHello World2
");//更新文件内容
zip.file("me.txt", "myself
");
zip.file("nested/hello.txt", "Hello World3
");//创建一个文件夹，并在文件夹中创建一个文件
zip.folder("nested").file("hello.txt", "Hello World4
");//与上一句相同，所以是对已存在文件进行更新操作
console.log(zip);
//********移除文件
//zip.remove("me.txt");//移除文件
//zip.remove("nested");//移除文件夹的时候，会把文件夹中的文件一起移除
//console.log(zip);
//********读取zip中的某个文件文件夹的数据
zip.file("hello.txt").async("string").then(function (data) {
console.log(data);//输出字符串
});
if (JSZip.support.uint8array) {
zip.file("hello.txt").async("uint8array").then(function (data) {
console.log(data);//输出对应的ascii码
});
}
//********将zip生成一个存在内存的文件，不是真正的压缩包，需要使用FileSaver.js保存并触发下载
var promise = null;
if (JSZip.support.uint8array) {
promise = zip.generateAsync({type : "uint8array"});
} else {
promise = zip.generateAsync({type : "string"});
}
console.log(promise);
var promise = null;
if (JSZip.support.uint8array) {
promise = zip.generateAsync({type : "uint8array"});
} else {
promise = zip.generateAsync({type : "string"});
}
console.log(promise);
/****读取zip文件，可以用在文件上传时，content就需要传入一个file
var new_zip = new JSZip();
new_zip.loadAsync(content)
.then(function(zip) {
new_zip.file("hello.txt").async("string")；
});//*/
//******保存并下载压缩包
zip.generateAsync({type:"blob"}).then(function (blob) {
saveAs(blob, "hello.zip");
}, function (err) {//报错处理
});
}
}
</script>
</body>
</html>
2、 打包下载图片
之前会涉及jszip也是为了进行前端打包图片并下载。前面也说了很多，将图片转为压缩包文件的方法就是获取图片对应的base64数据，根据base64数据生成文件。代码如下：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"/> <script type="text/javascript" src="js/jszip.min.js"></script> <script src="js/FileSaver.js"></script> <script src="js/jquery-3.3.1.min.js"></script> </head> <body> <button id="download">下载</button> <script> window.onload=function(){ document.getElementById('download').onclick = function(){ var zip = new JSZip();//*****创建实例，zip是对象实例 var file_name = 'pic.zip'; var array=['img/1.jpg','img/2.jpg','img/7.png']; var len=function(arr){ var l = 0; for(var key in arr){ l++; } return l; } for(let i=0;i<array.length;i++){ //对每一个图片链接获取base64的数据，并使用回调函数处理 getBase64Image(array[i],function(dataURL){ //对获取的图片base64数据进行处理 var img_arr = dataURL.split(','); zip.file(i.toString()+'.jpg',img_arr[1],{base64: true});//根据base64数据在压缩包中生成jpg数据 var ziplength = len(zip.files); if(ziplength==array.length){//当所有图片都已经生成打包并保存zip zip.generateAsync({type:"blob"}) .then(function(content) { //console.log(content); saveAs(content, file_name); }); } }); } } } //****传入图片链接，返回base64数据 function getBase64Image(images,callback) { var img = new Image(); var canvas = document.createElement("canvas"); img.onload = function(){ canvas.getContext("2d").drawImage(img,0,0); var dataURL=canvas.toDataURL();//使用canvas获取图片的base64数据 callback?callback(dataURL):null; //调用回调函数 } img.src = images; } </script> </body> </html>
不过最终没有实现我想要的结果，还是转后端处理了，因为我要打包下载的“图片”是DCM文件，不能简单地使用<img>加载，使用canvas加载还要涉及“基石”（cornerstone）的使用，转base64的操作都在“基石”源代码中，还不想看它的源代码，暂时放一会。
参考：
http://stuk.github.io/jszip/documentation/examples/read-local-file-api.html