因为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. How Javascript works (Javascript工作原理) (十一) 渲染引擎及性能优化小技巧

    个人总结:读完这篇文章需要20分钟,这篇文章主要讲解了浏览器中引擎的渲染机制. DOMtree       ----|   |---->  RenderTree CSSOMtree  ----| ...

  2. express随笔

    Express 是node 第三方框架,框架的意义就在于能大大简化程序地开发.看一下Express是怎么简化node程序开发的. 1,用Express写一个hello world 程序,我们来体验一下 ...

  3. vue 常用ui组件库

    vux github ui demo:https://github.com/airyland/vux Mint UI 项目主页:http://mint-ui.github.io/#!/zh-cn de ...

  4. Activiti工作流框架学习（二）——使用Activiti提供的API完成流程操作

    可以在项目中加入log4j,将logj4.properties文件拷入到src目录下,这样框架执行的sql就可以输出到到控制台,log4j提供的日志级别有以下几种: Fatal  error  war ...

  5. IntelliJ IDEA 详细图解最常用的配置 ，适合刚刚用的新人。（转）

    IntelliJ IDEA使用教程 (总目录篇) 刚刚使用IntelliJ IDEA 编辑器的时候,会有很多设置,会方便以后的开发,磨刀不误砍柴工. 比如:设置文件字体大小,代码自动完成提示,版本管理 ...

  6. [Python] for.. not in.. Remove Deduplication

    Write a function, remove_duplicates that takes a list as its argument and returns a new list contain ...

  7. HTML5：标记文字

    文本层面的元素(简称文本元素).把这些元素加入文本其中,也就引入了结构和含义. HTML5规范明白指出:使用元素应该全然从元素的语义出发.但这类元素中有些元素的含义很明白,有些则比較含糊. 在元素的使 ...

  8. 洛谷P3531 [POI2012]LIT-Letters

    题目描述 Little Johnny has a very long surname. Yet he is not the only such person in his milieu. As it ...

  9. geotif格式的波段描述信息探究

    作者:朱金灿 来源:http://blog.csdn.net/clever101 有时打开一些geotif文件,可以看到它的波段描述,但是它究竟存储在文件的什么位置呢?今天研究了一下,大致搞清了这个问 ...

  10. css相关用法

    1. 2. 3.offset([coordinates]) 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整型属性:top 和 left,以像素计.此方法只对可见元素有效. a.获取当前元素的 ...