html文件内容

<!DOCTYPE html>
<html lang="en">

<head>
</head>
<style>
</style>
<body>
<div class="wth-main" style="width: 100%;margin:0 auto; margin-top:40px;overflow: hidden;">
         <span class="btn_export_img_span" style="margin-right: 50px" >导出档案图片</span>
</div>
<!-- wrap-footer begin -->
<include file="pub:footer" title="公用" />
<script type="text/javascript" src="/jquery.1.11.1.min.js"></script>
<script type="text/javascript" src="/FileSaver.js"></script>
<script type="text/javascript" src="/myjs.js"></script>
<script type="text/javascript" src="/jszip.min.js"></script>

</body>
</html>

                                               JS文件内容

function export_img_Records() {
   packageImages();
}

var imgName = ["图片1","图片2","图片3"];
//将要进行多文件下载的mp3文件地址，以组数的形式存起来（这里只例了3个地址）
var imgUrl = ["http://sktcm.oss-cn-hangzhou.aliyuncs.com/files/12/3rn521778998397.jpeg",
   "http://sktcm.oss-cn-hangzhou.aliyuncs.com/files/12/3re521777382739.jpeg",
   "http://sktcm.oss-cn-hangzhou.aliyuncs.com/files/12/3pu521710268997.jpeg"];

function packageImages(){
   $('#status').text('处理中。。。。。');
   var imgBase64 = [];
   var imageSuffix = [];//图片后缀
   var zip = new JSZip();
   zip.file("readme.txt", "案件详情资料\n");
   var img = zip.folder("images");
   for(var i=0;i<imgUrl.length;i++){
      var src = imgUrl[i];
      var suffix = src.substring(src.lastIndexOf("."));
      imageSuffix.push(suffix);
      getBase64(src).then(function(base64){
         imgBase64.push(base64.substring(22));
      },function(err){
         console.log(err);//打印异常信息
      });
   }

   function tt(){
      setTimeout(function(){
         if(imgUrl.length == imgBase64.length){
            for(var i=0;i<imgUrl.length;i++){
               img.file(imgName[i] + imageSuffix[i], imgBase64[i], {base64: true});
            }
            zip.generateAsync({type:"blob"}).then(function(content) {
               // see FileSaver.js
               status = saveAs(content, "images.zip");
               layer.closeAll();
               layer.msg("导出成功！");
            });
         }else{
            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']
   }
}

$(function(){
   $('.btn_export_img_span').bind('click', function () {
      export_img_Records();
   });
})

如果产生越域错误，我这边提供一种在谷歌浏览器的解决方案：

右键谷歌浏览器，选择属性--->快捷方式在目标："C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" 后面加上 --disable-web-security --user-data-dir，如下图所示，

点击应用，点击确定，要使用上述功能时需要右击浏览器图标，再点打开（双击图标打开的浏览器有时候无效，因为可能被360篡改了浏览器，所以需要右击图标再点打开才有效果）

js批量打包下载图片

html文件内容

猜你喜欢