已用该文章的知识实现了批量下载,所需的两个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
标签:function,canvas,批量,img,JS,var,图片,下载,pathImg From: https://www.cnblogs.com/corechen/p/17146686.html