通過jS打包下載圖片

 

<script src="~/Areas/House/Content/js/HouseInfo/jszip.js"></script>
<script src="~/Areas/House/Content/js/HouseInfo/FileSaver.js"></script>

//圖片下載
    $("#btn_downloadImage").click(function () {
        layer.msg("正在打包下載……", { icon: 1 });
        //防止連續點擊
        $("#btn_downloadImage").attr('disabled', "true");
        var houseId = $("#hidId").val();
        $.ajax({
            url: '/House/HouseInfo/GetAllImage',
            type: "post",
            data: { Id: houseId },
            success: function (msg) {
                var result = $.parseJSON(msg);
                var s1 = result[0].imgPath;
                var pathImg = new Array();
                for (var i = 0; i < result.length; i++) {
                    pathImg[i] = _imgTool["ImgShowUri"] + result[i].imgPath + "-big";//獲取圖片路徑
                }
                var patimghImg = new Array();
                var isNum = 0;//阻礙進程的標識

                //根據圖片路徑將圖片轉為base64
                function convertImgToBase64(url, callback, outputFormat) {
                    isNum = 1;
                    var canvas = document.createElement('CANVAS'),
                        ctx = canvas.getContext('2d'),
                        img = new Image;
                    img.crossOrigin = 'Anonymous';
                    img.onload = function () {
                        canvas.height = img.height;
                        canvas.width = img.width;
                        ctx.drawImage(img, 0, 0);
                        var dataURL = canvas.toDataURL(outputFormat || 'image/jpg');
                        callback.call(this, dataURL);
                        canvas = null;
                        isNum = 0;
                    };
                    img.src = url;
                }

                //將每張base64圖片保存到img在進行壓縮
                for (var i = 0; i < pathImg.length; i++) {
                    test(pathImg[i]);//測試：imagePath
                    setTimeout(3000, isD);
                }

                function isD() {//阻塞等待進程執行結束
                    if (isNum == 0) {

                    } else {
                        setTimeout(3000, isD)
                    }
                }

                var j = 0;
                var zip = new JSZip();
                var img = zip.folder("images");
                //壓縮下載圖片
                function test(imagePath) {
                    convertImgToBase64(imagePath, function (base64Img) {
                        //console.log(base64Img);
                        patimghImg[j] = base64Img;
                        var imgstr = patimghImg[j].split(',')[1];
                        img.file(j + ".jpg", imgstr, { base64: true }); //獲取圖片文件
                        j++;
                        if (j == pathImg.length) {
                            zip.generateAsync({ type: "blob" }).then(function (content) {
                                // 保存到安裝包
                                saveAs(content, houseId + "Example.zip");
                                $('#btn_downloadImage').removeAttr("disabled");
                            });
                        }
                    });
                }
            }
        });

    });