Jszip的使用和打包下载图片
因为canvas总结到后面又想到了jszip的一些事情，那就索性也回去看看吧。试过，至少谷歌和火狐都是支持jszip的。
1、 jszip的使用
官方文档说的很清楚了，而且也有读取zip文件、生成zip文件下载的js代码示例，下面就简单说说吧。
<1>读取zip文件，一般用于上传zip文件后读取内容，不过我懒得写input结构，并没有实现，只是了解一下，官网文档有相关说明。
//****读取zip文件，可以用在文件上传时，content就需要传入一个file
var new_zip = new JSZip(); new_zip.loadAsync(content)
.then(function(zip) {
new_zip.file("hello.txt").async("string")；//读取压缩包后可以读取其中文件的内容
});
<2>在压缩包中生成文件夹\文件并下载
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="js/jszip.min.js"></script>
<script src="js/FileSaver.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<button id="download">下载</button> <script>
window.onload=function(){
document.getElementById('download').onclick = function(){
var zip = new JSZip();//*****创建实例，zip是对象实例 //********在zip中创建和更新文件/文件夹
zip.file("hello.txt", "Hello World1\n");//创建一个文件
zip.file("hello.txt", "aHello World2\n");//更新文件内容
zip.file("me.txt", "myself\n");
zip.file("nested/hello.txt", "Hello World3\n");//创建一个文件夹，并在文件夹中创建一个文件
zip.folder("nested").file("hello.txt", "Hello World4\n");//与上一句相同，所以是对已存在文件进行更新操作 console.log(zip);
//********移除文件
//zip.remove("me.txt");//移除文件
//zip.remove("nested");//移除文件夹的时候，会把文件夹中的文件一起移除
//console.log(zip); //********读取zip中的某个文件\文件夹的数据
zip.file("hello.txt").async("string").then(function (data) {
console.log(data);//输出字符串
}); if (JSZip.support.uint8array) {
zip.file("hello.txt").async("uint8array").then(function (data) {
console.log(data);//输出对应的ascii码
});
} //********将zip生成一个存在内存的文件，不是真正的压缩包，需要使用FileSaver.js保存并触发下载
var promise = null;
if (JSZip.support.uint8array) {
promise = zip.generateAsync({type : "uint8array"});
} else {
promise = zip.generateAsync({type : "string"});
}
console.log(promise);
var promise = null;
if (JSZip.support.uint8array) {
promise = zip.generateAsync({type : "uint8array"});
} else {
promise = zip.generateAsync({type : "string"});
}
console.log(promise);
/****读取zip文件，可以用在文件上传时，content就需要传入一个file
var new_zip = new JSZip(); new_zip.loadAsync(content)
.then(function(zip) {
new_zip.file("hello.txt").async("string")；
});//*/ //******保存并下载压缩包
zip.generateAsync({type:"blob"}).then(function (blob) {
saveAs(blob, "hello.zip");
}, function (err) {//报错处理 }); }
}
</script>
</body>
</html>
2、 打包下载图片
之前会涉及jszip也是为了进行前端打包图片并下载。前面也说了很多，将图片转为压缩包文件的方法就是获取图片对应的base64数据，根据base64数据生成文件。代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="js/jszip.min.js"></script>
<script src="js/FileSaver.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<button id="download">下载</button> <script>
window.onload=function(){
document.getElementById('download').onclick = function(){
var zip = new JSZip();//*****创建实例，zip是对象实例
var file_name = 'pic.zip';
var array=['img/1.jpg','img/2.jpg','img/7.png'];
var len=function(arr){
var l = 0;
for(var key in arr){
l++;
}
return l;
}
for(let i=0;i<array.length;i++){
//对每一个图片链接获取base64的数据，并使用回调函数处理
getBase64Image(array[i],function(dataURL){
//对获取的图片base64数据进行处理
var img_arr = dataURL.split(',');
zip.file(i.toString()+'.jpg',img_arr[1],{base64: true});//根据base64数据在压缩包中生成jpg数据
var ziplength = len(zip.files);
if(ziplength==array.length){//当所有图片都已经生成打包并保存zip
zip.generateAsync({type:"blob"})
.then(function(content) {
//console.log(content);
saveAs(content, file_name);
});
}
}); } } }
//****传入图片链接，返回base64数据
function getBase64Image(images,callback) {
var img = new Image();
var canvas = document.createElement("canvas");
img.onload = function(){
canvas.getContext("2d").drawImage(img,0,0);
var dataURL=canvas.toDataURL();//使用canvas获取图片的base64数据 callback?callback(dataURL):null; //调用回调函数 }
img.src = images;
}
</script>
</body>
</html>
使用jszip对图片进行打包下载
不过最终没有实现我想要的结果，还是转后端处理了，因为我要打包下载的“图片”是DCM文件，不能简单地使用<img>加载，使用canvas加载还要涉及“基石”（cornerstone）的使用，转base64的操作都在“基石”源代码中，还不想看它的源代码，暂时放一会。
参考：
http://stuk.github.io/jszip/documentation/examples/read-local-file-api.html
Jszip的使用和打包下载图片的更多相关文章
- nodejs, 阿里oss上传下载图片
const archiver = require('archiver')const send = require('koa-send')const oss = require('ali-oss').W ...
- php 下载图片并打包成Zip格式压缩包
前言:最近公司有个需要下载多个图片并打包成压缩包的需求,下面来看看具体是怎么做的 1.没什么说的,懒得说啥,直接看代码 /** * 下载图片并生成压缩包 * @param $data 图片数组,一维 ...
- 数据库blob图片文件，多图片打包下载
数据库存储blob图片文件,前端打包下载 数据库图片文件实体类 package com.cmrh.mspserver.pos.dto; import java.io.Serializable; imp ...
- c#服务端图片打包下载
一,设计多图片打包下载逻辑:1,如果是要拉取腾讯云等资源服务器的图片,2,我们先把远程图片拉取到本地的临时文件夹,3,然后压缩临时文件夹,4,压缩完删除临时文件夹,5,返回压缩完给用户,6,用户就去请 ...
- js证书批量生成与打包下载
前边有提到最近的一个证书生成保存下载打印的需求. 之前实现的是一个单个操作的页面,现在把实现的批量效果和进度效果的代码展示出来. html <button class="btn btn ...
- 2014年最新720多套Android源码2.0GB免费一次性打包下载
之前发过一个帖子,但是那个帖子有点问题我就重新发一个吧,下面的源码是我从今年3月份开始不断整理源码区和其他网站上的android源码,目前总共有720套左右,根据实现的功能被我分成了100多个类,总共 ...
- C#.NET快速开发框架-企业版V4.0截图打包下载
C/S系统开发框架-企业版 V4.0 (Enterprise Edition) http://www.csframework.com/cs-framework-4.0.htm 其它图片打包下载: ht ...
- ASP.NET多文件批量打包下载
在对多文件打包中用到了 DotNetZip 的方法来实现对多文件压缩打包.需要到http://dotnetzip.codeplex.com/处下载该文件,然后引用即可. Default.aspx: & ...
- cocos2dx-lua http请求下载图片，使用XMLHttpRequest类
HttpFileDownLoadSimple.lua local downloader = {} --数据拆分,以没1024*5字节拆成一段,打包写入文件 (拆完再拼接,转成字符串) local fu ...
随机推荐
- 16个ASP.NET MVC扩展点【附源码】
转载于:http://www.cnblogs.com/wupeiqi/p/3570445.html 1.自定义一个HttpModule,并将其中的方法添加到HttpApplication相应的事件中! ...
- 分享js中 pageY = clientY + document.body.scrollTop 之间的关系
//这里没有考虑兼容ie模式下 兼容一般主流浏览器 var $1 = document.getElementById('main') $1.onclick = function(e){ console ...
- C++ new 的用法
原文链接:http://www.builder.com.cn/2008/0104/696370.shtml “new”是C++的一个关键字,同时也是操作符.关于new的话题非常多,因为它确实比较复杂, ...
- SQL保存XML报错 “XML 分析: 行 1，字符 47，非法的 xml 字符”
例如: <?xml version="1.0" encoding="utf-8" standalone="yes"?> < ...
- JAVA学习（一）——基本语法
tips:前端开发写惯了弱类型语言,再来学强类型语言,真的是被各种修饰符.类型声明给整的云里雾里,而且java语法和javascript语言差别还是很大的,所以做好笔记,把一些需要注意的地方记下来是非 ...
- 转：向IOS设备发送推送通知
背景 SMS 和 MMS 消息是由无线运营商通过设备的电话号码向特定设备提供的.实现 SMS/MMS 的服务器端应用程序的开发人员必须费大量精力才能与现有的封闭电信基础架构进行交互(其中包括获取电话号 ...
- ORA-06575: 程序包或函数 NO_VM_DROP_PROC 处于无效状态
SQL> drop user aaa ; drop user aaa ORA-00604: 递归 SQL 级别 1 出现错误 ORA-06575: 程序包或函数 NO_VM_DROP_P ...
- eclipse的项目栏
点击window然后选择show view 然后选择project Explorer就会出现项目栏
- 解决 php7 cli 模式下中文乱码的两中方法
解决 php7 cli 模式下中文乱码的两中方法1. 给PHP文件开头加上 exec('chcp 936'); 然后把该文件以 ANSI 格式编码2. 在 php.ini 中设置 default_ch ...
- 关于自定义一个上传的file按钮
在input中html给我们一个 type file用来做文件上传的功能,比如 但是这样的样式,实在难看,在开发的时候看了layui和bootstrap的点击上传,都很不错. 前者的调用方式和js的 ...