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

我尝试了另一种方法，但是此代码几乎立即崩溃了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);
}

在这两种情况下，我都觉得我正在错误地使用dispatchEvent（）函数，但我不能把手指放在它上面。在第一种情况下，正确检索单个图像是令人鼓舞的。我有一种感觉，我在第二种情况下陷入了糟糕的内存访问区域。

有什么想法吗？

Answer 1

我不知道您的代码可能存在什么问题（可能是 document.createEvent() 已被弃用的事实），但我能够在没有Chrome抱怨的情况下下载大约90个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 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();

然后，通过点击顶部左侧出现的按钮，您将获得一大堆图像:) （注意：您的下载文件夹将填充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);
}

Answer 3

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

}

使用Javascript一次下载多个图像

3 个答案: