大批量图片打包zip下载

最新推荐文章于 2025-07-03 14:11:53 发布

aicloudgo

最新推荐文章于 2025-07-03 14:11:53 发布

阅读量1.7w

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/evelen/article/details/90437973

前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何利用前端插件结合后台返回的图片列表，实现用户可以一键下载多个图片资源的功能，通过创建zip文件，方便快捷地进行大批量图片下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用插件

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/jszip.min.js"></script>
<script src="vendor/FileSaver.js"></script>

请求后台返回的图片列表

前端代码

<button onclick="getImgsUrl()">大批量图片打包zip下载</button>

<script>
    // 请求后台返回图片url列表
    function getImgsUrl() {
        axios({
            method: 'get',
            url: 'https://xxx.com.cn/v1/sys/ai-collect-photo/export/local?nums=10000',
        }).then(function (res) {
            console.log(res)
            var imgsArr = res.data.data; // 图片列表
            // 传入图片数组列表
            saveImgZip(imgsArr)
        }).catch(function (err) {
            console.log(err)
        })
    }

    //图片转base64; 传入图片路径，返回base64
    function getBase64(img) {
        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));
            }
            return deferred.promise();
        }
    }


    // 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("."));
            // console.log(suffix)
            imageSuffix.push(suffix);
        }
        // 创建JSZip对象
        var zip = new JSZip();
        // 创建文件
        // zip.file("readme.txt", "已采集通过的人员照片");
        // 创建文件夹
        var img = zip.folder("images");
        // 读取图片返回base64
        for (var i = 0; i < imgUrlArr.length; i++) {
            getBase64(imgUrlArr[i]).then(function (base64) {
                // console.log(base64)
                imgBase64.push(base64.substring(22));  // 去掉base64的图片格式前缀
            }, function (err) {
                console.log(err);
            });
        }

        function downloadZip() {
            setTimeout(function () {
                if (imgUrlArr.length == imgBase64.length) {
                    for (var i = 0; i < imgUrlArr.length; i++) {
                        img.file(i + imageSuffix[i], imgBase64[i], {base64: true});
                    }
                    zip.generateAsync({type: "blob"}).then(function (content) {
                        saveAs(content, "采集照片.zip"); // zip包命名
                    });
                } else {
                    downloadZip();
                }
            }, 100);
        }

        downloadZip()
    }
</script>