前端使用JSZIP實現批量下載圖片打包

使用JSZIP需要引用：

<script src="http://stuk.github.io/jszip/test/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="https://stuk.github.io/jszip/dist/jszip.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip/vendor/FileSaver.js"></script>

主要的方法傳入的參數

imgUrlArrs為圖片的路徑數組:如var paths = ['http://10.10.10.10:80/Form/2020-03-24/test05.jpg', 'http://10.10.10.10:00/Form/2020-03-24/RWB 7.4 FPL 5 1.25.jpg'];
需要特別注意，存儲轉碼后的圖片，沒有采用數組的方式，因為數組存入的時候，是無序的，並沒有按照for循環的i逐個去存入數據，故for循環去取數據的時候，就會導致取錯數據。
采用鍵值對的形式，進行數據的存取，保證正確的取到圖片的轉碼數據。

// jszip打包下載圖片
function saveImgZip(imgUrlArrs) {
    var imgUrlArr = []; // 圖片列表
    imgUrlArr = imgUrlArrs
    var imgBase64 = {};//存放轉成base64的圖片，采用鍵值對形式就行存儲，不采用數組。因為數組在異步中會導致存取數據的無序，數據混亂
    var imgNameArr = [];  // 圖片名稱
    var imageSuffix = []; // 圖片后綴
    for (var i = 0; i < imgUrlArrs.length; i++) {
        // 圖片后綴
        var suffix = imgUrlArrs[i].substring(imgUrlArrs[i].lastIndexOf("."));
        imageSuffix.push(suffix);
        //獲取文件的名稱
        var startIndex = imgUrlArrs[i].lastIndexOf("/");
        var endIndex = imgUrlArrs[i].lastIndexOf(".");
        var fileName = imgUrlArrs[i].substring(startIndex + 1, endIndex);
        imgNameArr.push(fileName);
    }
    // 創建JSZip對象
    var zip = new JSZip();
    // 創建文件夾
    var img = zip.folder("images");
    // 讀取圖片返回base64
    for (var i = 0; i < imgUrlArr.length; i++) {
        getBase64(imgUrlArr[i],i).then(function (base64,index) {
            //imgBase64.push(base64.substring(22));  // 去掉base64的圖片格式前綴
            imgBase64[index] = base64.substring(22);
        }, function (err) {
            console.log(err);
        });
    }
    function downloadZip() {
        setTimeout(function () {
            if (imgUrlArr.length == Object.keys(imgBase64).length) {
                for (var i = 0; i < imgUrlArr.length; i++) {
                    img.file(imgNameArr[i] + imageSuffix[i], imgBase64[i], { base64: true });
                }
                zip.generateAsync({ type: "blob" }).then(function (content) {
                    saveAs(content, "生產表單.zip"); // zip包命名
                });
            } else {
                downloadZip();
            }
        }, 100);
    }

    downloadZip();
}


//圖片轉base64; 傳入圖片路徑，返回base64
function getBase64(img,index) {
    function getBase64Image(img, width, height) {
        var canvas = document.createElement("canvas");
        canvas.width = width ? width : img.width;
        canvas.height = height ? height : img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        var dataURL = canvas.toDataURL();
        return dataURL;
    }

    var image = new Image();
    image.crossOrigin = 'Anonymous';
    image.src = img;
    /*
    * deferred對象是一個延遲對象，意思是函數延遲到某個點才開始執行，改變執行狀態的方法有兩個（成功：resolve和失敗：reject），
    * 分別對應兩種執行回調（成功回調函數：done和失敗回調函數fail）
    * */
    var deferred = $.Deferred();
    if (img) {
        image.onload = function () {
            // 執行成功回調
            deferred.resolve(getBase64Image(image),index);
        }
        return deferred.promise();
    }
}