因为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. SQLServer 查询最近一天，三天，一周，一月，一季度数据的方法

    三天 select * from T_news where datediff(day,addtime,getdate())<= 2 and datediff(day,addtime,getdat ...

  2. python 多线程探索

    前面已经了解过了,python多线程效率较低的主要原因是存在GIL,即Global Interpreter Lock(全局解释器锁).这里继续详细的看下GIL的说明与如何避免GIL的影响,从而提高py ...

  3. ES6学习笔记（七）对象的新增方法

    1.Object.is() ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===).它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0.J ...

  4. Spring MVC 转发和重定向

    本文介绍Spring MVC中转发和重定向的区别. 转发和重定向 开始Java EE时,可能会对转发(forward)和重定向(redirect)这个两个概念不清楚.本文先通过代码实例和运行结果图片感 ...

  5. 洛谷 P1716 双调序列

    P1716 双调序列 题目描述 电脑组的童鞋们经常玩一些智力PK小游戏,某月某日,发源于小朋友又发明了一种新的序列:双调序列,所谓的双调呢主要是满足如下条件描述: 假定有n(n<=1000)个整 ...

  6. 洛谷 P2614 计算器弹琴

    P2614 计算器弹琴 题目描述 总所周知,计算器可以拿来干很多它本不应该干的事情,比如写作文.(参看洛谷P2549) 小A发现了一个计算器的另一个隐藏功能——弹琴. http://www.bilib ...

  7. Ajax核心对象——高速上手XmlHttpRequest

    引言: 非TGB的.直接跳过吧-- 从开学结束JQuery之后,计算机的进度停了一段时间.某天无聊的时候,又又一次把BS的东西拿过来看了看. 发现里面有非常多既熟悉又陌生的东西. 在学习王兴魁老师的A ...

  8. 使用 Facebook开源动画库 POP 实现真实衰减动画

    1. POP动画基于底层刷新原理.是基于CADisplayLink,1秒钟运行60秒,接近于游戏开发引擎 @interface ViewController () @property (nonatom ...

  9. Unity中uGUI的控件事件穿透逻辑

    1.正常来说Image和Text是会拦截点击事件的,假设加入EventTrigger的话,就能够响应相应的交互事件. 2.假设Image和Text是一个Button的子控件.那么尽管其会显示在Butt ...

  10. [python]CompressionError: bz2 module is not available

    事情是这种,在centos6 上本来是python2.6 然后我下载了一个python2.7.5 安装之后,把默认python改动为python2.7.5版本号. 使用pip安装twisted的时候出 ...