JS批量下载图片

　　已用该文章的知识实现了批量下载，所需的两个JS文件可以在GitHub下载

<script src="/js/jszip.js"></script>
<script src="/js/FileSaver.min.js"></script>
<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");
                            });
                        }
                    });
                }
            }
        });
 
    });
</script>

一些CSS元素根据需求可以改动一下，JS代码没有问题

 

原文链接：https://www.cnblogs.com/fyssl/p/9523132.html