使用Javascript一次下载多个图像

Question

我正在尝试使用Chrome扩展程序中的javascript一次下载多个图像.我想通过触发每个图像的点击来实现这一点(每个图像都包含在带有下载属性的href标记和"clickit"类中).我们的想法是使用clickit类遍历每个href并触发鼠标单击,从而下载图像.

以下代码仅下载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);
});

我尝试了另一种方法,但这段代码几乎立即崩溃了铬(在日志中抛出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);
}

在这两种情况下,我都有一种感觉,我正在使用dispatchEvent()函数,但是我不能把手指放在它上面.在第一种情况下,正确检索单个图像是令人鼓舞的.我有一种感觉,我在第二种情况下陷入了糟糕的内存访问领域.

有任何想法吗？

Answer 1

我不知道您的代码可能存在什么问题(也许是不推荐使用了document.createEvent()这一事实),但是我能够下载大约90个没有chrome的imgs抱怨它(它可能会问你一次)如果您允许网页下载多个图像,但就是这样).
示例代码:

/* 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);
    }
}

作为演示,您可以访问此FreeImages.co.uk库,打开控制台并粘贴上面的代码,以及以下内容:

/* 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();

然后,通过单击顶部,左侧显示的按钮,您将获得一大堆图像:)
(注意:您的下载文件夹将填充90个图像.修改"限制"参数downloadAll()以限制它们你希望.)

Answer 2

您不需要 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);}

同样的东西为了阅读而美化：

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);
}