8

我正在尝试使用 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() 函数，但我不能指手画脚。在第一种情况下，正确检索单个图像是令人鼓舞的。我有一种感觉，我在第二种情况下陷入了糟糕的内存访问领域。

有任何想法吗？

4

4 回答 4

24

我不知道您的代码可能有什么问题（可能是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);
    }
}

作为演示，您可以转到此素材库，打开控制台并粘贴上面的代码以及以下代码：

/* 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()以限制它们，如果你希望。）

于 2013-11-07T09:02:48.607 回答
4

您不需要 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);
}
于 2018-02-15T22:56:34.673 回答
2

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

}
于 2018-06-16T12:43:36.133 回答
1

如果您需要下载批量图像，则可以使用以下脚本。在您要下载图像的同一网站的开发人员工具中使用此脚本。

例如，如果你需要从 https://testing-images.com/images-1.jpg下载图片到 https://testing-images/images-34.jpg 然后去https://testing-images。 com网站并打开开发人员工具并转到控制台并运行以下脚本。

for(let i=1; i<35; i++){
  setTimeout(() => {
    fetch(`https://testing-images/images-${i}.jpg`)
      .then(resp => resp.blob())
      .then(blob => {
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        // the filename you want
        a.download = `slide-mian-${i}.jpg`;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
      })
      .catch(() => alert('oh no!'));
  }, i*1000);
}
于 2021-10-13T03:26:52.093 回答