多张图下载,下载图片

Posted siyueshini

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了多张图下载,下载图片相关的知识,希望对你有一定的参考价值。

多张图下载,下载图片,跨域的不可以

download.js源码

//download.js v4.21, by dandavis; 2008-2018. [MIT] see http://danml.com/download.html for tests/usage
// v1 landed a FF+Chrome compatible way of downloading strings to local un-named files, upgraded to use a hidden frame and optional mime
// v2 added named files via a[download], msSaveBlob, IE (10+) support, and window.URL support for larger+faster saves than dataURLs
// v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback was improved with force-download mime and base64 support. 3.1 improved safari handling.
// v4 adds AMD/UMD, commonJS, and plain browser support
// v4.1 adds url download capability via solo URL argument (same domain/CORS only)
// v4.2 adds semantic variable names, long (over 2MB) dataURL support, and hidden by default temp anchors
// https://github.com/rndme/download

(function (root, factory) {
    if (typeof define === ‘function‘ && define.amd) {
        // AMD. Register as an anonymous module.
        define([], factory);
    } else if (typeof exports === ‘object‘) {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        root.download = factory();
 }
}(this, function () {

    return function download(data, strFileName, strMimeType) {

        var self = window, // this script is only for browsers anyway...
            defaultMime = "application/octet-stream", // this default mime also triggers iframe downloads
            mimeType = strMimeType || defaultMime,
            payload = data,
            url = !strFileName && !strMimeType && payload,
            anchor = document.createElement("a"),
            toString = function(a){return String(a);},
            myBlob = (self.Blob || self.MozBlob || self.WebKitBlob || toString),
            fileName = strFileName || "download",
            blob,
            reader;
            myBlob= myBlob.call ? myBlob.bind(self) : Blob ;
     
        if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
            payload=[payload, mimeType];
            mimeType=payload[0];
            payload=payload[1];
        }


        if(url && url.length< 2048){ // if no filename and no mime, assume a url was passed as the only argument
            fileName = url.split("/").pop().split("?")[0];
            anchor.href = url; // assign href prop to temp anchor
             if(anchor.href.indexOf(url) !== -1){ // if the browser determines that it‘s a potentially valid url path:
            var ajax=new XMLHttpRequest();
            ajax.open( "GET", url, true);
            ajax.responseType = ‘blob‘;
            ajax.onload= function(e){ 
                 download(e.target.response, fileName, defaultMime);
                };
            setTimeout(function(){ ajax.send();}, 0); // allows setting custom ajax headers using the return:
              return ajax;
            } // end if valid url?
        } // end if url?


        //go ahead and download dataURLs right away
        if(/^data:([w+-]+/[w+.-]+)?[,;]/.test(payload)){
        
            if(payload.length > (1024*1024*1.999) && myBlob !== toString ){
                payload=dataUrlToBlob(payload);
                mimeType=payload.type || defaultMime;
            }else{            
                return navigator.msSaveBlob ? // IE10 can‘t do a[download], only Blobs:
                    navigator.msSaveBlob(dataUrlToBlob(payload), fileName) :
                    saver(payload) ; // everyone else can save dataURLs un-processed
            }
            
        }else{//not data url, is it a string with special needs?
            if(/([x80-xff])/.test(payload)){             
                var i=0, tempUiArr= new Uint8Array(payload.length), mx=tempUiArr.length;
                for(i;i<mx;++i) tempUiArr[i]= payload.charCodeAt(i);
                 payload=new myBlob([tempUiArr], {type: mimeType});
            }         
        }
        blob = payload instanceof myBlob ?
            payload :
            new myBlob([payload], {type: mimeType}) ;


        function dataUrlToBlob(strUrl) {
            var parts= strUrl.split(/[:;,]/),
            type= parts[1],
            indexDecoder = strUrl.indexOf("charset")>0 ? 3: 2,
            decoder= parts[indexDecoder] == "base64" ? atob : decodeURIComponent,
            binData= decoder( parts.pop() ),
            mx= binData.length,
            i= 0,
            uiArr= new Uint8Array(mx);

            for(i;i<mx;++i) uiArr[i]= binData.charCodeAt(i);

            return new myBlob([uiArr], {type: type});
         }

        function saver(url, winMode){

            if (‘download‘ in anchor) { //html5 A[download]
                anchor.href = url;
                anchor.setAttribute("download", fileName);
                anchor.className = "download-js-link";
                anchor.innerHTML = "downloading...";
                anchor.style.display = "none";
                 anchor.addEventListener(‘click‘, function(e) {
                     e.stopPropagation();
                     this.removeEventListener(‘click‘, arguments.callee);
                 });
                document.body.appendChild(anchor);
                setTimeout(function() {
                    anchor.click();
                    document.body.removeChild(anchor);
                    if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(anchor.href);}, 250 );}
                }, 66);
                return true;
            }

            // handle non-a[download] safari as best we can:
            if(/(Version)/(d+).(d+)(?:.(d+))?.*Safari//.test(navigator.userAgent)) {
                if(/^data:/.test(url))    url="data:"+url.replace(/^data:([w/-+]+)/, defaultMime);
                if(!window.open(url)){ // popup blocked, offer direct download:
                    if(confirm("Displaying New Document

Use Save As... to download, then click back to return to this page.")){ location.href=url; }
                }
                return true;
            }

            //do iframe dataURL download (old ch+FF):
            var f = document.createElement("iframe");
            document.body.appendChild(f);

            if(!winMode && /^data:/.test(url)){ // force a mime that will download:
                url="data:"+url.replace(/^data:([w/-+]+)/, defaultMime);
            }
            f.src=url;
            setTimeout(function(){ document.body.removeChild(f); }, 333);

        }//end saver




        if (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL)
            return navigator.msSaveBlob(blob, fileName);
        }

        if(self.URL){ // simple fast and modern way using Blob and URL:
            saver(self.URL.createObjectURL(blob), true);
        }else{
            // handle non-Blob()+non-URL browsers:
            if(typeof blob === "string" || blob.constructor===toString ){
                try{
                    return saver( "data:" + mimeType  + ";base64," + self.btoa(blob) );
                }catch(y){
                    return saver( "data:" + mimeType  + "," + encodeURIComponent(blob) );
                }
            }

            // Blob but not URL support:
            reader=new FileReader();
            reader.onload=function(e){
                saver(this.result);
            };
            reader.readAsDataURL(blob);
        }
        return true;
    }; /* end download() */
}));

 先引入上面download.js源码

 function downloadfile(url, strFileName, strMimeType) {
  var
xmlHttp = null; if (window.ActiveXObject) { // IE6, IE5 浏览器执行代码 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlHttp = new XMLHttpRequest(); } //2.如果实例化成功,就调用open()方法: if (xmlHttp != null) { xmlHttp.open("get", url, true); xmlHttp.responseType = ‘blob‘;//关键 xmlHttp.send(); xmlHttp.onreadystatechange = doResult; //设置回调函数 } function doResult() { if (xmlHttp.readyState == 4) { //4表示执行完成 if (xmlHttp.status == 200) { //200表示执行成功 download(xmlHttp.response, strFileName, strMimeType); } } } }

// 匹配后缀
function getFileType(fileName) {
  console.log(fileName);
  // 后缀获取
  let suffix = ‘‘;
  // 获取类型结果
  let result = ‘‘;
  try {
    const flieArr = fileName.split(‘.‘);
    suffix = flieArr[flieArr.length - 1];
  } catch (err) {
    suffix = ‘‘;
  }
  // fileName无后缀返回 false
  if (!suffix) { return false; }
  suffix = suffix.toLocaleLowerCase();
  // 图片格式
  const imglist = [‘png‘, ‘jpg‘, ‘jpeg‘, ‘bmp‘, ‘gif‘];
  // 进行图片匹配
  result = imglist.find(item => item === suffix);
  if (result) {
    return ‘image‘;
  }
  // 匹配txt
  const txtlist = [‘txt‘];
  result = txtlist.find(item => item === suffix);
  if (result) {
    return ‘txt‘;
  }
  // 匹配 excel
  const excelist = [‘xls‘, ‘xlsx‘];
  result = excelist.find(item => item === suffix);
  if (result) {
    return ‘excel‘;
  }
  // 匹配 word
  const wordlist = [‘doc‘, ‘docx‘];
  result = wordlist.find(item => item === suffix);
  if (result) {
    return ‘word‘;
  }
  // 匹配 pdf
  const pdflist = [‘pdf‘];
  result = pdflist.find(item => item === suffix);
  if (result) {
    return ‘pdf‘;
  }
  // 匹配 ppt
  const pptlist = [‘ppt‘, ‘pptx‘];
  result = pptlist.find(item => item === suffix);
  if (result) {
    return ‘ppt‘;
  }
  // 匹配 视频
  const videolist = [‘mp4‘, ‘m2v‘, ‘mkv‘, ‘rmvb‘, ‘wmv‘, ‘avi‘, ‘flv‘, ‘mov‘, ‘m4v‘];
  result = videolist.find(item => item === suffix);
  if (result) {
    return ‘video‘;
  }
  // 匹配 音频
  const radiolist = [‘mp3‘, ‘wav‘, ‘wmv‘];
  result = radiolist.find(item => item === suffix);
  if (result) {
    return ‘radio‘;
  }
  // 其他 文件类型
  return ‘other‘;
  }

//下载多张图

pic= ["img.png","img.png"];

 btns.onclick = function name(params) {
  for (let index = 0; index < pic.length; index++) {
    let timestamp = new Date().getTime();//当前时间
    downloadfile(pic[index], timestamp, getFileType(timestamp))
    timestamp++;
  }
 }

//下载一张图

 btns.onclick = function name(params) {
  downloadfile(src, timestamp, getFileType(timestamp))
 }

 

原文链接:https://www.cnblogs.com/adingfirstlove/p/12856264.html

以上是关于多张图下载,下载图片的主要内容,如果未能解决你的问题,请参考以下文章

Alamofire 多张图片下载并保存在本地

根据图片的url地址下载图片到本地保存代码片段

AFNetworking 2.0 完成多张图片下载

php实现多张图片打包下载

一个网页中有100多张图片,怎样一次性把这些图片存到电脑中?

web前端啥是雪碧图