因为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的使用和打包下载图片的更多相关文章

  1. nodejs, 阿里oss上传下载图片

    const archiver = require('archiver')const send = require('koa-send')const oss = require('ali-oss').W ...

  2. php 下载图片并打包成Zip格式压缩包

    前言:最近公司有个需要下载多个图片并打包成压缩包的需求,下面来看看具体是怎么做的 1.没什么说的,懒得说啥,直接看代码 /** * 下载图片并生成压缩包 * @param $data 图片数组,一维 ...

  3. 数据库blob图片文件，多图片打包下载

    数据库存储blob图片文件,前端打包下载 数据库图片文件实体类 package com.cmrh.mspserver.pos.dto; import java.io.Serializable; imp ...

  4. c#服务端图片打包下载

    一,设计多图片打包下载逻辑:1,如果是要拉取腾讯云等资源服务器的图片,2,我们先把远程图片拉取到本地的临时文件夹,3,然后压缩临时文件夹,4,压缩完删除临时文件夹,5,返回压缩完给用户,6,用户就去请 ...

  5. js证书批量生成与打包下载

    前边有提到最近的一个证书生成保存下载打印的需求. 之前实现的是一个单个操作的页面,现在把实现的批量效果和进度效果的代码展示出来. html <button class="btn btn ...

  6. 2014年最新720多套Android源码2.0GB免费一次性打包下载

    之前发过一个帖子,但是那个帖子有点问题我就重新发一个吧,下面的源码是我从今年3月份开始不断整理源码区和其他网站上的android源码,目前总共有720套左右,根据实现的功能被我分成了100多个类,总共 ...

  7. C#.NET快速开发框架-企业版V4.0截图打包下载

    C/S系统开发框架-企业版 V4.0 (Enterprise Edition) http://www.csframework.com/cs-framework-4.0.htm 其它图片打包下载: ht ...

  8. ASP.NET多文件批量打包下载

    在对多文件打包中用到了 DotNetZip 的方法来实现对多文件压缩打包.需要到http://dotnetzip.codeplex.com/处下载该文件,然后引用即可. Default.aspx: & ...

  9. cocos2dx-lua http请求下载图片，使用XMLHttpRequest类

    HttpFileDownLoadSimple.lua local downloader = {} --数据拆分,以没1024*5字节拆成一段,打包写入文件 (拆完再拼接,转成字符串) local fu ...

随机推荐

  1. 16个ASP.NET MVC扩展点【附源码】

    转载于:http://www.cnblogs.com/wupeiqi/p/3570445.html 1.自定义一个HttpModule,并将其中的方法添加到HttpApplication相应的事件中! ...

  2. OpenCV中Mat数据的访问报错

    最近再写一段程序的时候,要访问Mat中的元素.在定义Mat型数据的时候,用 Mat ObjectPoints(48,3,CV_32FC1,0) 对其进行初始化后,用at进行访问时报内存错误. Mat ...

  3. Codeforces Round #206 (Div. 2) 部分题解

    传送门:http://codeforces.com/contest/355 A:水题,特判0 int k,d; int main(){ //FIN; while(cin>>k>> ...

  4. SpringBoot结合Mybatis 使用 mapper*.xml 进行数据库增删改查操作

    什么是 MyBatis? MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架. MyBatis 消除了几乎所有的 JDBC 代码和参数的手工设置以及对结果集的检索. MyBa ...

  5. hibernate : object references an unsaved transient instance 问题

    save顺序问题---比如学生表和班级表..学生表里有班级ID的外键.一对多的关系. 你save的时候应该先save班级,再save学生..否则学生的外键没有对应的值,引发异常

  6. CodeForcesGym 100502E Opening Ceremony

    Opening Ceremony Time Limit: 5000ms Memory Limit: 524288KB This problem will be judged on CodeForces ...

  7. hiho week 37 P1 : 二分·二分查找之k小数

    P1 : 二分·二分查找之k小数 Time Limit:10000ms Case Time Limit:1000ms Memory Limit:256MB 描述 在上一回里我们知道Nettle在玩&l ...

  8. 模板实参推导 & xx_cast的实现

    首先,类模板必须被显式特化.当然了,可以通过一个辅助函数,通过参数类型,返回特化的类模板,来间接处理. 这个技术被广泛应用在ptr_fun, make_pair, mem_fun, back_inse ...

  9. BZOJ 2708 [Violet 1]木偶 DP

    题意:id=2708">链接 方法: DP 解析: 这题太神辣. 做梦都没想到DP啊,反正我不会. 先谈一个我有过的错的想法. 最小费用最大流? 能匹配的边连费用为1的,不能匹配的连费 ...

  10. js插件---datatables如何使用

    js插件---datatables如何使用 一.总结 一句话总结:a.引入css和js(不要忘记css):b.js代码启动插件(里面可以用参数控制各种功能) 1.dataTables如何显示控制行(比 ...