因為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\n");//創建一個文件
zip.file("hello.txt", "aHello World2\n");//更新文件內容
zip.file("me.txt", "myself\n");
zip.file("nested/hello.txt", "Hello World3\n");//創建一個文件夾，並在文件夾中創建一個文件
zip.folder("nested").file("hello.txt", "Hello World4\n");//與上一句相同，所以是對已存在文件進行更新操作
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