因为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. XFCE 桌面环境美化，fedora27系统

    一.添加RPM Fusion源,安装方法这里就不说了以前的文章里写过. 二.安装XFCE 主题管理器 xfce-theme-manager [root@Fedora ~]# dnf install x ...

  2. 紫书 例题 9-14 UVa 1218 （树形dp）

    这道题有个初始值设成1e9, 然后这个值是要加很多次的,然后就会溢出变成负数, 然后就一直WA, 找这个bug找了一个小时--以后不能随便这样设那么大, 要考虑会不会加很多次然后溢出. 讲一下思路. ...

  3. SpringBoot 结合 Thymeleaf 进行页面的跳转

    1.引入thymeleaf依赖 <!--thymeleaf--> <dependency> <groupId>org.springframework.boot< ...

  4. 带你玩转Visual Studio——性能分析与优化

    找到性能瓶颈 二八法则适合很多事物:最重要的只占其中一小部分,约20%,其余80%的尽管是多数,却是次要的.在程序代码中也是一样,决定应用性能的就那20%的代码(甚至更少).因此优化实践中,我们将精力 ...

  5. HTML5吃豆豆游戏开发实战（一）使用Canvas绘制游戏主角

    近期在学习HTML5.爱因斯坦曾说过,"最好的学习就是自己去经历". 于是.我想在学习HTML5的同一时候.做一款简单的小游戏,这样学习起来也会非常有趣的.我想做的是曾经小时候玩儿 ...

  6. Kinect 开发 —— 骨骼追踪

    骨骼追踪技术通过处理景深数据来建立人体各个关节的坐标,骨骼追踪能够确定人体的各个部分,如那部分是手,头部,以及身体.骨骼追踪产生X,Y,Z数据来确定这些骨骼点.骨骼追踪系统采用的景深图像处理技术使用更 ...

  7. CSUOJ 1554 SG Value

    1554: SG Value Time Limit: 5 Sec  Memory Limit: 256 MBSubmit: 140  Solved: 35 Description The SG val ...

  8. ios UITextView 提示文本

    定义两个UITextView,一个用于输入文本,一个用于显示提示信息,当输入文本为空时显示提示信息,否则不显示提示信息. //6.3.1文字内容提示 _contentTextViewTip = [[U ...

  9. Oracle Sqlplus中上下键出现^[[A乱码问题

    安装rlwrap  下载:http://utopia.knoware.nl/~hlub/uck/rlwrap/ 或者 百度云盘:http://pan.baidu.com/s/1ntM8YXr 须要先安 ...

  10. 为什么会出现NoSQL数据库

    为什么会出现NoSQL数据库 一.总结 一句话总结:sql不支持分布式且且有性能瓶颈且不支持分布式,不同NoSQL适合不同的场景 1."不同的NoSQL数据库只适合不同的场景"这句 ...