8

Chrome 拡張機能で JavaScript を使用して、一度に複数の画像をダウンロードしようとしています。これを行うには、各画像でクリックを発生させたいと思います (それぞれがダウンロード属性とクラス "clickit" を持つ href タグにラップされています)。アイデアは、clickit クラスを使用して各 href をループし、マウス クリックを起動して、画像をダウンロードすることです。

次のコードは、n = 25 のイメージのうち最初の 1 つだけをダウンロードしますが、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() 関数を間違って使用しているように感じますが、指を置くことはできません。最初のケースでは、単一の画像を適切に取得できることが励みになります。2番目のケースでは、メモリアクセスが悪い領域に陥っているように感じます。

何か案は？

4

4 に答える 4

24

コードの問題が何であるかはわかりませんが (おそらくdocument.createEvent()が廃止されたという事実です)、クロムがまったく文句を言わずに90個の画像をダウンロードできました(一度尋ねられるかもしれません)ウェブページが複数の画像をダウンロードすることを許可している場合でも、それだけです)。
サンプルコード:

/* 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()あなたが望む。）

于 2013-11-07T09:02:48.607 に答える
4

コンソールでこれを実行したり、ブックマークレットを作成したりできるクロム拡張機能は必要ありません。

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 の答えは、setInterval() でラップするまで、Chrome、Firefox、または Safari のいずれかを使用しても機能しません。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

大量の画像をダウンロードする必要がある場合は、以下のスクリプトを使用できます。画像をダウンロードしたい Web サイトから開発者ツールでこのスクリプトを使用します。

たとえば、https://testing-images.com/images-1.jpg から https://testing-images/images-34.jpg に画像をダウンロードする必要がある場合は、 https : //testing-images に移動します。 com Web サイトを開いて開発者ツールを開き、コンソールに移動して以下のスクリプトを実行します。

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 に答える