?

<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 });//防止連續(xù)點(diǎn)擊$("#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;//阻礙進(jìn)程的標(biāo)識//根據(jù)圖片路徑將圖片轉(zhuǎn)為base64function 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在進(jìn)行壓縮for (var i = 0; i < pathImg.length; i++) {test(pathImg[i]);//測試：imagePathsetTimeout(3000, isD);}function isD() {//阻塞等待進(jìn)程執(zhí)行結(jié)束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");});}});}}});});

　　

轉(zhuǎn)載于:https://www.cnblogs.com/fyssl/p/9523132.html

總結(jié)

以上是生活随笔為你收集整理的通过jS打包下载图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。