前端JS下载图片压缩包

 => 前端下载图片压缩包

加载js文件：https://github.com/Stuk/jszip/tree/master/dist/jszip.js

打包img文件为blob对象：

 

var zip = new JSZip()
App = {
    saveFilebyBlob: function (content, fileName) {
        var aLink = document.createElement('a');
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent("click", false, false);
        aLink.download = 'fileName';
        aLink.href = URL.createObjectURL(content);
        aLink.dispatchEvent(evt);
    }, downloadImageZip: function (zip, imgUrls, index) {
        index = index || 0;
        if (index >= imgUrls.length) {
            var content = zip.generate({type: "blob"});
            return App.saveFilebyBlob(content, 'offer_images' + (new Date).to_i + '.zip')
        }
        var img = document.createElement('img');
        img.crossOrigin = 'anonymous';

        img.onload = function () {
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);

            var dataURL = canvas.toDataURL("image/png");
            var imgBase64Data = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");

            var imgFile = zip.folder("images");
            imgFile.file(imgUrls[index].split("\/").pop(), imgBase64Data, {base64: true});
            App.downloadImageZip(zip, imgUrls, index + 1)
        };

        img.src = imgUrls[index];
    }
};