图片批量下载并打包成zip

it2025-07-28  9

需要引入两个js文件:

<script src="__STATIC__/js/FileSaver.js"></script> <script src="__STATIC__/js/jszip.min.js"></script>

js文件下载地址: 链接:https://pan.baidu.com/s/19mF3BqFBJ3OMj6G_0bXm2g 提取码:1q2w

下边传入的图片数据格式data数据格式: //用到的图片信息只有:

gz_qrcode

下边是具体的代码实现

function packageImages(data) { $('#status').text('处理中。。。。。'); var url = window.location.protocol+"//"+window.location.host;//图片路径 var imgsSrc = []; var imgBase64 = []; var imageSuffix = [];//图片后缀 var zip = new JSZip(); var img = zip.folder("点餐二维码");//解压后文件名称 for (var i = 0; i < data.length; i++) { var src = url+'/qrcode/'+data[i].gz_qrcode;//图片完成路径 var suffix = src.substring(src.lastIndexOf(".")); imageSuffix.push(suffix); getBase64(src).then(function (base64) { imgBase64.push(base64.substring(22)); }, function (err) { console.log(err);//打印异常信息 }); } function tt(){ setTimeout(function(){ if(data.length == imgBase64.length){ for(var i=0;i<data.length;i++){ //图片名称data[i].gz_qrcode img.file(data[i].gz_qrcode, imgBase64[i], {base64: true}); } var content = zip.generate({type:"blob"}); saveAs(content, "点餐二维码.zip"); $('#status').text('处理完成。。。。。'); }else{ $('#status').text('已完成:'+imgBase64.length+'/'+data.length); tt(); } },100); } tt(); } //设置图片信息 function getBase64(img){ function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.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; var deferred=$.Deferred(); if(img){ image.onload =function (){ deferred.resolve(getBase64Image(image));//将base64传给done上传处理 } return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest'] } }
最新回复(0)