javascript - 如何下载多张图片？

Question

我想在我的代码中下载多个图像。我已经传递了单个网址进行下载，并且正在下载单个图像，但是当我在数组中获取图像网址时，它们不会被下载。这是我的代码:

 <script type="text/javascript">

 //var upics = ["https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0cq-7TkAONUjnDKz2AkEgiFRG6E0Dmrl43lOuj_nQCOrnQG8","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0cq-7TkAONUjnDKz2AkEgiFRG6E0Dmrl43lOuj_nQCOrnQG8"];

var _OBJECT_URL;
document.querySelector('#download-button').addEventListener('click', function() {
    var upics = ["https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGvEiBfvtvDFi2aSNDydoH_DVaCJBtaaIpl0PhrddPdx4cwoAX","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0cq-7TkAONUjnDKz2AkEgiFRG6E0Dmrl43lOuj_nQCOrnQG8"];
    for (index = 0; index < upics.length; index++) {
        console.log("hiii");
    var request = new XMLHttpRequest();
    request.addEventListener('readystatechange', function(e) {
        /* if(request.readyState == 2 && request.status == 200) {
            document.querySelector('#start-download').style.display = 'block';
            document.querySelector('#download-button').style.display = 'none';
        }
        else if(request.readyState == 3) {
            document.querySelector('#download-progress-container').style.display = 'block';
            document.querySelector('#start-download').style.display = 'none';
        } */
         if(request.readyState == 4) {
            _OBJECT_URL = URL.createObjectURL(request.response);

            document.querySelector('#save-file').setAttribute('href', _OBJECT_URL);

            document.querySelector('#save-file').setAttribute('download', 'images.jpeg'); 
            /* document.querySelector('#save-file').setAttribute('download', [upics]); */
            document.querySelector('#save-file').style.display = 'block';
            document.querySelector('#download-progress-container').style.display = 'none';

            /* setTimeout(function() {
                window.URL.revokeObjectURL(_OBJECT_URL);

                document.querySelector('#download-button').style.display = 'block';
                document.querySelector('#save-file').style.display = 'none';
            }, 60*1000); */
        }
    });
   /*  request.addEventListener('progress', function(e) {
        var percent_complete = (e.loaded / e.total)*100;
        document.querySelector('#download-progress').style.width = percent_complete + '%';
    }); */
    request.responseType = 'blob';
    console.log("imageis"+upics[index]);
    /* request.open('get',[upics]); */
    //request.open('get', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0cq-7TkAONUjnDKz2AkEgiFRG6E0Dmrl43lOuj_nQCOrnQG8');
    request.open('get',upics[index]);
    request.send(); 
    }
});
</script>

Answer 1

您的循环正在覆盖 document.querySelector('#save-file')。

试试这个:

var upics = [
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGvEiBfvtvDFi2aSNDydoH_DVaCJBtaaIpl0PhrddPdx4cwoAX",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0cq-7TkAONUjnDKz2AkEgiFRG6E0Dmrl43lOuj_nQCOrnQG8"
];

//
function download(item) {
  var fileName = item.split(/(\\|\/)/g).pop();

  var image = new Image();
  image.crossOrigin = "anonymous";
  image.src = item;
  image.onload = function() {
  
    // use canvas to load image
    var canvas = document.createElement('canvas');
    canvas.width = this.naturalWidth;
    canvas.height = this.naturalHeight;
    canvas.getContext('2d').drawImage(this, 0, 0);
    
    // grab the blob url
    var blob;
    if (image.src.indexOf(".jpg") > -1) {
      blob = canvas.toDataURL("image/jpeg");
    } else if (image.src.indexOf(".png") > -1) {
      blob = canvas.toDataURL("image/png");
    } else if (image.src.indexOf(".gif") > -1) {
      blob = canvas.toDataURL("image/gif");
    } else {
      blob = canvas.toDataURL("image/png");
    }

    // create link, set href to blob
    var a = document.createElement('a');
    a.title = fileName;
    a.href = blob;
    a.style.display = 'none';
    a.setAttribute("download", fileName);
    a.setAttribute("target", "_blank");
    document.body.appendChild(a);
    
    // click item
    a.click();
  }
}

function downloadAll(item) {
  for (var i in upics) {
    download(upics[i]);
  }
}

<body>
  <button onclick="downloadAll()">  
  download  
</button>
</body>