因为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. mini vimrc

    Mini version: set enc=utf-8 ffs=unix,dos,mac lm=zh_CN.utf-8 set nu nowb nocp nowrap ru nobk sm is no ...

  2. CodeVS 1296 营业额统计

    1296 营业额统计2002年  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 大师 Master   题目描述 Description Tiger最近被公司升任为营业部经理, ...

  3. Windows 操作系统与 .NET Framework

    Windos 2000 在单位的机房里好不easy才找到一台安装 Windows 2000 Server SP4 操作系统的server.这台硕果仅存的server到本月底也要退役了. Windows ...

  4. sublime 3 删除当前行

    sublime 3 删除当前行 sublime 默认的是 “ctrl+shift+k” ,然而当你点击时,会出现希腊字母的软键盘,与windows默认快捷键有冲突 不用急 不用慌 这时打开: “Pre ...

  5. 考满分软件测试工程师（实习）面试&软达启航面试

    考满分软件测试工程师(实习)面试 从这学期秋季开学的时候开始准备找工作,一边学习看书,一边完善简历海投:九月下旬的时候在年级实习群里看到考满分发的宣传海报马上就加了hr的微信,hr要了我的简历,并给技 ...

  6. java poi操作excel示例代码

    import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io ...

  7. words2

    餐具:coffee pot 咖啡壶coffee cup 咖啡杯paper towel 纸巾napkin 餐巾table cloth 桌布tea -pot 茶壶tea set 茶具tea tray 茶盘 ...

  8. sql server 怎样用select语句调用自定义表值函数

    --自定义函数的参数是表的字段,这种情况要用cross apply啦Select B.* FROM [master].[dbo].[分列测试] A cross apply dbo.f_split(应用 ...

  9. 学习WWDC的好资源！

    学习WWDC的好资源. 大家都知道.要看Apple每年一度的WWDC,仅仅要到它的Developer站点去就能够了.那里有每年的研讨会视频,并且还能够下载每一个视频的SD或HD视频文件,以及相关的演示 ...

  10. 生成CPU使用率 sin 曲线 控制cpu使用率 编程之美

    入职Oracle 以后想着把之前写过的<编程之美>中控制CPU使用率曲线的程序再写一边, 可是总是由于入职须要学习的东西太多, 没有时间. 程序早就写好了. 最终有机会贴出来了.o(∩∩) ...