js把页面图片打包成zip格式

JavaScript019

js把页面图片打包成zip格式,第1张

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style>

img{

width: 200px

height: 150px

}

</style>

</head>

<body>

<img src="http://pic.pptbz.com/201506/2015070581208537.JPG" />

<img src="http://img.taopic.com/uploads/allimg/121014/234931-1210140JK414.jpg" />

<img src="http://img.zcool.cn/community/01c92f56597f686ac7251c94e76e51.jpg" />

<img src="http://img.zcool.cn/community/01888f5922bad7b5b3086ed4cc3711.jpg" />

<br /><br />

<button onclick="packageImages()">packageImages</button><span id="status"></span><br /><br />

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jszip.min.js"></script>

<script type="text/javascript" src="js/FileSaver.js"></script>

<script type="text/javascript">

function packageImages(){

$('#status').text('处理中。。。。。')

var imgs = $('img')

var imgsSrc = []

var imgBase64 = []

var imageSuffix = []//图片后缀

var zip = new JSZip()

    zip.file("readme.txt", "案件详情资料\n")

    var img = zip.folder("images")

    

for(var i=0i<imgs.lengthi++){

var src = imgs[i].getAttribute("src")

var suffix = src.substring(src.lastIndexOf("."))

imageSuffix.push(suffix)

 getBase64(imgs[i].getAttribute("src"))

            .then(function(base64){

             imgBase64.push(base64.substring(22))

              

                  //console.log(base64)//处理成功打印在控制台

            },function(err){

                  console.log(err)//打印异常信息

            }) 

           

}

function tt(){

setTimeout(function(){

if(imgs.length == imgBase64.length){

for(var i=0i<imgs.lengthi++){

img.file(i+imageSuffix[i], imgBase64[i], {base64: true})

}

zip.generateAsync({type:"blob"}).then(function(content) {

        // see FileSaver.js

        saveAs(content, "images.zip")

    })

    $('#status').text('处理完成。。。。。')

    

}else{

//console.log('imgs.length:'+imgs.length+',imgBase64.length:'+imgBase64.length)

$('#status').text('已完成：'+imgBase64.length+'/'+imgs.length)

tt()

}

},100)

}

tt()

}

 

    //传入图片路径，返回base64

    function getBase64(img){

        function getBase64Image(img,width,height) {//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小

          var canvas = document.createElement("canvas")

          canvas.width = width ? width : img.width

          canvas.height = height ? height : img.height

 

          var ctx = canvas.getContext("2d")

          ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

          var dataURL = canvas.toDataURL()

          return dataURL

        }

        var image = new Image()

        image.crossOrigin = 'Anonymous'

        image.src = img

        var deferred=$.Deferred()

        if(img){

          image.onload =function (){

            deferred.resolve(getBase64Image(image))//将base64传给done上传处理

          }

          return deferred.promise()//问题要让onload完成后再return sessionStorage['imgTest']

        }

      }

    

</script>

</body>

</html>

压缩或解压缩一个文件可以通过导流一个 fs.ReadStream 到一个 zlib 流，然后到一个 fs.WriteStream 来完成。

inp.pipe(gzip).pipe(out)

一步压缩或解压缩数据可以通过快捷方法来完成。

var buffer = new Buffer('eJzT0yMAAGTvBe8=', 'base64')

zlib.unzip(buffer, function(err, buffer) {

  if (!err) {

    console.log(buffer.toString())

  }

})

要在 HTTP 客户端或服务器中使用此模块，请在请求和响应中使用 accept-encoding 和 content-encoding 头。