Jszip的使用和打包下载图片

2019/01/15 14:19
阅读数 462

因为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>
View Code

 

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

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部