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 ...
随机推荐
- javascript“类”与继承总结
http://haorooms.com/post/js_jc_lei2
- 反斜杠处理函数addslashes()和stripslashes()
addslashes():对输入字符串中的某些预定义字符前添加反斜杠,这样处理是为了数据库查询语句等的需要.这些预定义字符是:单引号 (') ,双引号 (") ,反斜杠 (\) ,NULL. ...
- ES6学习笔记（六）数组的扩展
1.扩展运算符 1.1含义 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) // ...
- BZOJ1189: [HNOI2007]紧急疏散evacuate(二分答案，最大流)
Description 发生了火警,所有人员需要紧急疏散!假设每个房间是一个N M的矩形区域.每个格子如果是'.',那么表示这是一 块空地:如果是'X',那么表示这是一面墙,如果是'D',那么表示这是 ...
- power design设计数据库
power design是收费软件 大致设计流程: 画出概念数据模型,添加实体,连接实体间关系 生成物理数据模型,可以继续在此基础上修改 生成数据库脚本(一个.sql文件),文件中前面是删除表,后面是 ...
- 学习参考《矩阵分析与应用（第二版）张贤达》PDF
要想深入理解机器学习,或者对人工智能的某个领域有所研究,都必须掌握矩阵及其应用. 学习<矩阵分析与应用第2版>时,会发现总结了大量线性代数的知识,主要是给工科生用的.归纳了不少论文中的解法 ...
- 摄像头驱动——V4L2框架分析
一.概述 Video for Linux 2,简称V4l2,是Linux内核中关于视频设备的内核驱动框架,为上层的访问底层的视频设备提供了统一的接口. 摄像头驱动是属于字符设备驱动程序.(分析linu ...
- 便捷编程－Xcode常用第三方插件 (随时更新)
Xcode工具插件 1.XAlign 让Xcode编辑器中的代码以多种方式瞬间对齐 地址:https://github.com/qfish/XAlign 2.VVDocumenter-Xcode 在X ...
- SpringBoot与SpringCloud的区别
1.Spring boot 是 Spring 的一套快速配置脚手架,可以基于spring boot 快速开发单个微服务:Spring Cloud是一个基于Spring Boot实现的云应用开发工具: ...
- iOS定制改动navigation的backbutton
iOS开发中.navigation的返回button是英文"back".想改动成中文"返回"或者自己定义的文字.这么简单的事情却折腾了小半个小时.原来是被lef ...