javascript 使用Javascript一次下载多个图像

Download multiple images at once with Javascript

提问by pheven

I'm attempting to download multiple images at once using javascript in a chrome extension. I'd like to do this by firing clicks on each of the images (each wrapped in an href tag with a download attribute, and the class "clickit"). The idea is to loop through each href with the clickit class and fire a mouse click, thus downloading the image.

我正在尝试使用 chrome 扩展中的 javascript 一次下载多个图像。我想通过点击每个图像（每个图像都包含在带有下载属性的 href 标签和类“clickit”中）来实现这一点。这个想法是使用 clickit 类遍历每个 href 并触发鼠标单击，从而下载图像。

The following code downloads only the first of n = 25 images, but is called 25 times (console logs "got here" that many times).

以下代码仅下载 n = 25 个图像中的第一个，但被调用 25 次（控制台日志“到达此处”多次）。

var evt = document.createEvent("MouseEvents");

evt.initMouseEvent("click", true, true, window,
        0, 0, 0, 0, 0, false, false, false, false, 0, null);

[].forEach.call( document.getElementsByClassName("clickit"), function(elem){
  console.log("got here");
  elem.dispatchEvent(evt);
});

I've tried an alternate method, but this code almost immediately crashes chrome (throwing KERN_PROTECTION_FAILURE's in the logs):

我尝试了另一种方法，但此代码几乎立即使 chrome 崩溃（在日志中抛出 KERN_PROTECTION_FAILURE）：

for (var i = 0; i < document.getElementsByClassName("clickit").length; i++){  
    var clickEvent = document.createEvent("MouseEvents");
    clickEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
    document.getElementsByClassName("clickit")[i].dispatchEvent(clickEvent);
}

for (var i = 0; i < document.getElementsByClassName("clickit").length; i++){  
    var clickEvent = document.createEvent("MouseEvents");
    clickEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
    document.getElementsByClassName("clickit")[i].dispatchEvent(clickEvent);
}

In both cases, I have a feeling that I'm using the dispatchEvent() function incorrectly, but I cannot put my finger on it. In the first case, the retrieval of a single image properly is encouraging. I have a feeling I'm falling into bad memory access territory with the second case.

在这两种情况下，我都觉得我错误地使用了 dispatchEvent() 函数，但我无法解决它。在第一种情况下，正确检索单个图像是令人鼓舞的。我有一种感觉，我在第二种情况下陷入了糟糕的内存访问领域。

Any ideas?

有任何想法吗？

回答by gkalpak

I don't know what the problem with your code might be (maybe the fact that document.createEvent()has been deprecated), but I was able to donwload some 90 imgs without chrome complaining about it at all (it may ask you once if you allow the webpage to download multiple images, but that's it).
Sample code:

我不知道你的代码可能有什么问题（也许document.createEvent()已被弃用），但我能够下载大约 90 个 imgs，而 chrome 根本没有抱怨它（它可能会问你一次如果您允许网页下载多个图像，仅此而已）。
示例代码：

/* Download an img */
function download(img) {
    var link = document.createElement("a");
    link.href = img.src;
    link.download = true;
    link.style.display = "none";
    var evt = new MouseEvent("click", {
        "view": window,
        "bubbles": true,
        "cancelable": true
    });

    document.body.appendChild(link);
    link.dispatchEvent(evt);
    document.body.removeChild(link);
    console.log("Downloading...");
}

/* Download all images in 'imgs'. 
 * Optionaly filter them by extension (e.g. "jpg") and/or 
 * download the 'limit' first only  */
function downloadAll(imgs, ext, limit) {
    /* If specified, filter images by extension */
    if (ext) {
        ext = "." + ext;
        imgs = [].slice.call(imgs).filter(function(img) {
            var src = img.src;
            return (src && (src.indexOf(ext, src.length - ext.length) !== -1));
        });
    }

    /* Determine the number of images to download */
    limit = (limit && (0 <= limit) && (limit <= imgs.length))
            ? limit : imgs.length;

    /* (Try to) download the images */
    for (var i = 0; i < limit; i++) {
        var img = imgs[i];
        console.log("IMG: " + img.src + " (", img, ")");
        download(img);
    }
}

As a demonstration, you can go to this FreeImages.co.uk Gallery, open the console and paste the above code, along with the following:

作为演示，您可以转到这个FreeImages.co.uk Gallery，打开控制台并粘贴上面的代码，以及以下内容：

/* Callback for button's "click" event */
function doit() {
    var imgs = document.querySelectorAll("img");
    downloadAll(imgs, "jpg", -1);
}

/* Create and add a "download" button on the top, left corner */
function addDownloadBtn() {
    var btn = document.createElement("button");
    btn.innerText = "Download all images";
    btn.addEventListener("click", doit);
    btn.style.position = "fixed";
    btn.style.top = btn.style.left = "0px";
    document.body.appendChild(btn);
}
addDownloadBtn();

Then, by clicking the button that appears on the top, left, you'll get yourself a whole bunch of images :)
(NOTE: Your download folder will get filled with 90 images. Modify the "limit" parameter of downloadAll()to limit them if you wish.)

然后，通过单击出现在顶部左侧的按钮，您将获得一大堆图像:)
（注意：您的下载文件夹将装满 90 个图像。修改“限制”参数downloadAll()以限制它们，如果你希望。）

回答by Eduard Florinescu

You don't need a chrome extension you could runt this in console or make a bookmarklet:

您不需要 chrome 扩展，您可以在控制台中运行它或制作书签：

images=document.querySelectorAll("img"); for (i of images) { var a = document.createElement('a'); a.href = i.src; console.log(i); a.download = i.src; document.body.appendChild(a); a.click(); document.body.removeChild(a);}

same thing beautified for reading:

同样的事情美化阅读：

images = document.querySelectorAll("img");
for (i of images) {
    var a = document.createElement('a');
    a.href = i.src;
    console.log(i);
    a.download = i.src;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

回答by Kim Aldis

Eduard's answer wouldn't work for me using either Chrome, Firefox or Safari until I wrapped it in a setInterval(). An interval of 500 worked for me. Less may work but I figured allow a safety margin. Although I can see how that could add up if the image count is high.

Eduard 的答案对我使用 Chrome、Firefox 或 Safari 都不起作用，直到我将它包装在 setInterval() 中。500 的间隔对我有用。较少可能有效，但我认为允许安全裕度。虽然我可以看到如果图像计数很高，那会如何加起来。

var i = 0;

var id = setInterval( function() {

    if ( i >= images.length ) {
       clearInterval( id );
       return;
    }

   var image = images[i++];
   i++;
   var a = document.createElement('a');
   console.log( image )
   a.href = image.src
   a.download = image.src
   document.body.appendChild(a);
   a.click();
   document.body.removeChild(a);

}