`

前端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];
    }
};

 

 

分享到:
评论

相关推荐

    前端开发js静态资源压缩文件

    - **提高加载速度**:压缩JavaScript文件可以减少网络传输的数据量,加快文件下载速度。 - **节省带宽**:对于移动用户或者网络环境不佳的用户,小文件意味着更少的流量消耗。 - **提升性能**:浏览器解析和执行...

    js合集压缩包

    这个"js合集压缩包"显然包含了多个JavaScript文件,可能涵盖各种功能和用途,例如DOM操作、动画效果、表单验证、AJAX请求等。以下是对JavaScript一些核心知识点的详细说明: 1. **基础语法**:JavaScript的基础包括...

    小米商城(html+css+js)必要图片压缩包.rar

    综上所述,这个压缩包提供的图片资源对于理解和实现小米商城的HTML+CSS+JS项目至关重要,它涵盖了网页设计和开发中的多个方面,包括基本的HTML结构、CSS样式控制、JavaScript交互以及性能优化和版权意识。...

    emoji图片压缩包代码

    综上所述,"emoji图片压缩包代码"是一个实用的开发资源,它涵盖了从图片优化、前端集成到后端处理的多个技术环节,对于提高移动和Web应用的交互性和用户体验具有积极意义。开发者可以根据自身需求,灵活运用这些...

    web前端期末大作业源码.zip

    3. JavaScript文件:可能包含`script.js`或其他命名的JS文件,用于实现页面的交互功能,比如按钮点击事件、音乐播放控制、图片轮播等。 在这个项目中,学生可能会利用HTML5的新特性来增强用户体验,例如音频元素(`...

    Web前端大作业.zip

    网站中央是图片跟“专注时尚美食餐饮”主题内容简介,主要介绍国内中式料理,日本的日式料理,西方的西式料理,分别搭配各种美食的主体图片,左边是图片,突出主题。接下来是关于我们经营理念的店铺信息介绍资料,...

    html+js实现将多个在线文件打包为压缩包下载

    html和js实现将多个在线文件打包为压缩包下载,将多个文件一起打包为zip格式文件后后下载。使用 JavaScript 中的 JSZip 库将多个在线附件打包为压缩包,然后使用浏览器的下载功能将其下载到本地

    用户模块前端代码实现压缩包

    3. `js/`:包含JavaScript文件,实现前端逻辑和交互。 4. `images/`:存放图片和其他媒体资源。 5. `WEB-INF/`:包含Web应用的配置文件,如`web.xml`,以及放置编译后的Servlet类和其他后台代码的地方。 6. `lib/`:...

    大学生Web前端静态网页设计期末大作业(高分必看).zip

    大学生Web前端静态网页设计期末大作业(高分必看)大学生Web前端静态网页设计期末大作业(高分必看)大学生Web前端静态网页设计期末大作业(高分必看)使用的是原生的 html,css,js代码大学生Web前端静态网页设计...

    本资源为ueditor富文本编辑器压缩包,里面包含ueditor.all.min.js等文件,有需要的读者可以自行下载。

    在压缩包中,`ueditor.all.min.js`是ueditor的核心脚本文件,包含了ueditor的所有功能模块。这个压缩的小型化(minified)版本是为了减小文件大小,提高页面加载速度。通过引用这个文件,开发者可以在网页上快速集成...

    基于百度地图的离线地图资源压缩包

    首先,我们需要理解Vue.js是一个轻量级的前端JavaScript框架,它以其简洁的API和组件化开发模式深受开发者喜爱。在Vue项目中集成百度地图,可以利用Vue的生命周期钩子和响应式数据绑定特性,使得地图的加载、交互和...

    前端常见问题整理.压缩包

    其他可能包含一些特定的工具、库或框架的使用,如Vue.js、React.js、Angular.js、Bootstrap、Axios等,或者是前端性能监控、错误追踪等实际开发中的问题。 总的来说,这个压缩包文件提供的内容覆盖了前端开发的多...

    javascript库pdfjs-1.8.188.js压缩包

    javascript库pdfjs-1.8.188.js压缩包javascript库pdfjs-1.8.188.js压缩包javascript库pdfjs-1.8.188.js压缩包

    web前端(html+css+js)简单的仿原神官网静态项目

    简单的前端小项目,偶然找到的大一时写的作业 使用了html+css+js 仅实现了部分功能:轮播图,播放音乐,视频,返回首页等 演示视频:https://www.bilibili.com/video/BV1C5411m7rn?spm_id_from=333.999.0.0 阅读建议...

    jquery打包,生成并下载zip文件

    标题 "jquery打包,生成并下载zip文件" 描述了一个使用jQuery技术在前端将图片文件打包成ZIP文件并供用户下载的场景。这个过程无需后端服务器的介入,从而减轻了服务器的压力并提高了用户体验。让我们详细了解一下这...

    JavaScript前端开发案例教程-源代码.rar

    这个名为"JavaScript前端开发案例教程-源代码.rar"的压缩包文件提供了一系列实践案例,帮助开发者深入理解和掌握JavaScript在网页开发中的应用。 首先,JavaScript是一种解释型、弱类型、基于原型的脚本语言,它的...

    bip前端公共函数excel导入导出压缩包

    本主题聚焦于“bip前端公共函数excel导入导出压缩包”,这是一个专门针对前端开发的功能模块,用于处理Excel文件的导入和导出操作。在实际应用中,这样的功能常常用于数据管理、报表生成或数据分析等场景。 Excel...

    fckeditor 和js验证框架 压缩包

    结合“JAVA”标签,我们可以推断这个压缩包可能包含了一些Java后端与前端(JavaScript和FCKeditor)交互的示例或库。在实际应用中,前端验证后,数据通常通过Ajax或表单提交到后台服务器进行进一步的验证和处理。...

    仿小米商城的前端素材压缩包

    总的来说,这个压缩包涉及的知识点包括但不限于:JSP开发、前端框架(如Bootstrap或自定义CSS/JS)、响应式设计、用户体验优化、购物车逻辑、订单处理流程、图片优化、JavaScript编程、数据库交互以及后台管理系统的...

Global site tag (gtag.js) - Google Analytics