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 ...
随机推荐
- noip 2018 day1 T3 赛道修建 贪心_树上问题_multiset
Code: // luogu-judger-enable-o2 #include<bits/stdc++.h> using namespace std; #define maxn 5000 ...
- @Accessors
@Accessors 作用:存取器,用于配置getter和setter方法的生成结果 三个属性:fluent.chain.prefix 1.fluent:流畅的,设置为true,getter和sett ...
- 【Henu ACM Round #13 C】 Ebony and Ivory
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 先求出c-bx的所有可能 ->存在map里面 然后枚举y看看ay在不在map里面 在的话就有解. 这样复杂度是\(O(N*lo ...
- Maven学习总结（20）——Maven pom.xml配置再体会
Maven的pom.xml配置文件详解 <!--父项目的坐标.如果项目中没有规定某个元素的值,那么父项目中的对应值即为项目的默认值. 坐标包括group ID,artifact ID和 vers ...
- 使用virtualenv搭建python虚拟开发环境
在使用python做开发时,如果多人需要在同一台机器上工作,或者机器环境经常变化时, 添加或删除一些python包很可能会影响到你自己的开发环境. 因此,通过virtualenv工具可以创建一个完全属 ...
- Android 学习笔记之Bitmap位图的缩放
位图的缩放也可以借助Matrix或者Canvas来实现. 通过postScale(0.5f, 0.3f)方法设置旋转角度,然后用createBitmap方法创建一个经过缩放处理的Bitmap对象,最后 ...
- 荣获CCF（中国计算机学会）高级会员代表资格
详细地址:http://www.ccf.org.cn/sites/ccf/xjhydb.jsp?contentId=2624287722908 650) this.width=650;" b ...
- 湖南省第八届大学生计算机程序设计竞赛（A,B,C,E,F,I,J)
A 三家人 Description 有三户人家共拥有一座花园,每户人家的太太均需帮忙整理花园.A 太太工作了5 天,B 太太则工作了4 天,才将花园整理完毕.C 太太因为正身怀六甲无法加入她们的行列, ...
- spark读写mysql
spark读写mysql除官网例子外还要指定驱动名称 travels.write .mode(SaveMode.Overwrite) .format("jdbc") .option ...
- ip---查看网络信息
Linux的ip命令和ifconfig类似,但前者功能更强大,并旨在取代后者. ifconfig属于net-tools.ip属于iproute2 设置一个IP地址,可以使用下列ip命令: ip add ...