通过jS打包下载图片
<script src=”~/Areas/House/Content/js/HouseInfo/jszip.js”></script>
<script src=”~/Areas/House/Content/js/HouseInfo/FileSaver.js”></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"); }); } }); } } }); });
版权声明:本文为fyssl原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。