機械学習用に画像検索の結果一覧のサムネイル画像を JavaScriptで全自動で一括で取得する方法

// Input Filename
baseFilename = window.prompt("Input SAVE Image Filename", "image_");

// 1st Scroll
await scrollToBottom("mye4qd");

// Click
document.getElementsByClassName("mye4qd")[0].click();

// 2nd Scroll
await scrollToBottom("OuJzKb");

// Google Image Search Preview Downloader
// <img class="rg_i Q4LuWd" data-src="xxxx"
// Get All element="img" class="rg_i" (NodeList)
// https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll
var imgs = document.body.querySelectorAll('img.rg_i');
for (var i = 0; i < imgs.length; ++i) {

  let imageStr = imgs[i].src;
  if (imageStr == "") continue;

  imgs[i].scrollIntoView();

  // Sleep 100ms
  await delay(100);

  // for Debug
  // console.log(imgs[i].alt);
  let image = new Image();
  image.src = imageStr;
  // document.body.appendChild(image);

  var imageContent;
  var imageType;
  var imageExt;

  if (imageStr.slice(0,6) === 'https:') {
    console.log(i +': '+ imageStr);

    // Jpeg or PNG
    imageContent = load_binary_resource(imageStr);
    imageType = 'image/jpeg';
    imageExt = "jpg";

    if (imageContent.charCodeAt(1) == 80) {
        imageType = 'image/png';
        imageExt = "png";
    }

  } else if (imageStr.slice(0,5) === 'data:') {
    // console.log(i +': '+ imageStr);

    let pos = imageStr.indexOf(';base64,');
    if (pos < 0) continue;

    let base64 = imageStr.substr(pos+8);

    // Jpeg only
    imageContent = atob(base64);
    imageType = imageStr.substring(5, pos);
    imageExt = "jpg";

  } else {
    console.log(i +': '+ imageStr);
    continue;
  }

  let imageLength = imageContent.length;
  if (imageLength == 0) continue;

  let fileName = baseFilename+('0000'+i).slice(-4)+"."+imageExt

  // Convert Pure ArrayBinary
  let buffer = new Uint8Array(imageLength);
  for (let n = 0; n < imageLength; ++n) {
      buffer[n] = imageContent.charCodeAt(n) & 0xFF; // to 8bit
  }

  // Create Auto Download
  let blob = new Blob([buffer], {type: imageType});
  let url = window.URL.createObjectURL(blob);
  let a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  a.href = url;
  a.download = fileName;
  a.click();

  console.log(i +': '+ fileName);
}

// 古いブラウザーでのバイナリデータの受信
// Receiving binary data in older browsers
// https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data
function load_binary_resource(url) {
  var req = new XMLHttpRequest();
  req.open('GET', url, false);
  // XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
  req.overrideMimeType('text\/plain; charset=x-user-defined');
  req.send(null);
  if (req.status != 200) return '';
  return req.responseText;
}

// Scroll to Bottom End
async function scrollToBottom(className) {
  for (var i = 0; i < 50; ++i) {
    var element = document.documentElement;
    var bottom = element.scrollHeight - element.clientHeight;
    window.scroll(0, bottom);
    // console.log(bottom);

    // End of Scroll
    if (document.getElementsByClassName(className)[0].clientHeight > 0) break;

    // Sleep 200ms
    await delay(200);
  }
}

// Sleep
function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

var snd = new Audio("data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU2LjI1LjEwMQAAAAAAAAAAAAAA/+NAwAAAAAAAAAAAAFhpbmcAAAAPAAAAAwAAA3YAlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaW8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw////////////////////////////////////////////AAAAAExhdmYAAAAAAAAAAAAAAAAAAAAAACQAAAAAAAAAAAN2UrY2LgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/jYMQAEvgiwl9DAAAAO1ALSi19XgYG7wIAAAJOD5R0HygIAmD5+sEHLB94gBAEP8vKAgGP/BwMf+D4Pgh/DAPg+D5//y4f///8QBhMQBgEAfB8HwfAgIAgAHAGCFAj1fYUCZyIbThYFExkefOCo8Y7JxiQ0mGVaHKwwGCtGCUkY9OCugoFQwDKqmHQiUCxRAKOh4MjJFAnTkq6QqFGavRpYUCmMxpZnGXJa0xiJcTGZb1gJjwOJDJgoUJG5QQuDAsypiumkp5TUjrOobR2liwoGBf/X1nChmipnKVtSmMNQDGitG1fT/JhR+gYdCvy36lTrxCVV8Paaz1otLndT2fZuOMp3VpatmVR3LePP/8bSQpmhQZECqWsFeJxoepX9dbfHS13/////aysppUblm//8t7p2Ez7xKD/42DE4E5z9pr/nNkRw6bhdiCAZVVSktxunhxhH//4xF+bn4//6//3jEvylMM2K9XmWSn3ah1L2MqVIjmNlJtpQux1n3ajA0ZnFSu5EpX////uGatn///////1r/pYabq0mKT//TRyTEFNRTMuOTkuNaqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq/+MQxNIAAANIAcAAAKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqg==");
snd.play();

　警告
　このコンソールを使用すると、Self-XSS と呼ばれる手法を使ってあなたになりすました攻撃者によって個人情報が騙し取られる可能性があります。よくわからないコードは、入力したり貼り付けたりしないでください。

  var img = imgs[i]
  // img.crossOrigin = "Anonymous";

  var canvas = document.createElement('canvas')
  canvas.width = img.naturalWidth
  canvas.height = img.naturalHeight

  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

  // VM3193:1 Uncaught DOMException
  // Failed to execute 'getImageData' on 'CanvasRenderingContext2D'
  // The canvas has been tainted by cross-origin data.
  // at <anonymous>:1:20 (anonymous) @ VM3193:1
  var buffer = ctx.getImageData(0, 0, canvas.width, canvas.height);

  // VM3202:1 Uncaught DOMException
  // Failed to execute 'toDataURL' on 'HTMLCanvasElement'
  // Tainted canvases may not be exported.
  // at <anonymous>:1:24 (anonymous) @ VM3202:1
  var dataUri = canvas.toDataURL();

マイクロソフトの提供する無料の機械学習アプリ Lobeで遊んでみる