使用插件
<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>
