Download site images. Works with infinite scroll.

web-console.js

// Download images
// from webpage
// - works with infinite scrolls, etc.
// - choose between `fetch` and `canvas`
// - to disable CORS:
//    - Firefox: `CORS Unblock` https://addons.mozilla.org/en-US/firefox/addon/cors-unblock/

let images = "img";
// Ex. Filter images that have `x-large` in them:
// images = "img[src*=xlarge]";

let saved = [];

const via = "canvas";
// other option: "fetch";

setInterval(function () {

	// Every second check again for images:

  document
    .querySelectorAll(images)
    .forEach(image => {
        // console.info(`image:`, { src: image.src });
        const fileName = image.src.substring(image.src.lastIndexOf("/")+1);
        // console.info(`file name:`, { fileName });
        if (saved.indexOf(fileName) >= 0) {
            console.info(`file ${fileName} already processed!`);
            return;
        }
        saved.push(fileName);

        // 1. Fetch API (Requires CORS)
        if ("fetch" === via) {
          const request = (new Request(image.src, {
              method: "GET"
          }));
          fetch(request)
              .then(response => response.blob())
              .then(imgBlob => {
                console.log(`img. blob:`, { imgBlob });
                const blobUrl = URL.createObjectURL(imgBlob);
                let link = document.createElement("a");
                const id = 'currentImage';
                link.href = blobUrl;
                link.id = id;
                link.download = `${fileName}`;
                link.innerHTML = "DOWNLOAD";
                document.body.appendChild(link);
                console.info(`Link download:`, { download: link.download });
                const allImages = document.querySelectorAll(`#${id}`);
                allImages[allImages.length-1].click();
                // URL.revokeObjectURL(blobUrl);
                // document.body.removeChild(link);
              });
         }

         // 2. Canvas (Requires CORS)
         if ("canvas" === via) {

           const id = 'imageCanvas';
           const imageId = 'currentImage'; 
           let canvas = document.getElementById(`${id}`);
           if (!canvas) {
               canvas = document.createElement("canvas");
               canvas.id = id;
               canvas.width = image.width;
               canvas.height = image.height;
               document.body.appendChild(canvas);
           } else {
               canvas.width = image.width;
               canvas.height = image.height;
           }
           canvas = document.getElementById(`${id}`);
           // console.log({ canvas });
           if (canvas.getContext) {
               const ctx = canvas.getContext("2d");
               // return document.getElementById("myvideo");
               // ctx.drawImage(fileName, 0, 0);
               // console.log({ ctx });
               const img = new Image();
               img.crossOrigin = "anonymous";
               img.setAttribute("crossorigin", "anonymous");
               img.onload = data => {
                   // console.log("Drawing image", { data, img });
                   ctx.drawImage(img, 0, 0, image.width, image.height);
                   // console.log("To Blob");
                   canvas.toBlob(blob => {
                       // console.log(`blob:`, typeof(blob)) // let you have 'blob' here
                       const blobUrl = URL.createObjectURL(blob);
                       let link = document.createElement("a"); // Or maybe get it from the current document
                       link.href = blobUrl;
                       link.download = `${fileName}`;
                       link.innerHTML = "DOWNLOAD";
                       link.id = imageId;
                       document.body.appendChild(link);
                       // console.info(`Link download:`, { download: link.download });
                       const allImages = document.querySelectorAll(`#${imageId}`);
                       allImages[allImages.length-1].click();
                       URL.revokeObjectURL(blobUrl);
                       document.body.removeChild(link);
                   }, 'image/jpeg', 1); // JPEG at 100% quality
               };
               img.src = image.src;
           }
         }
    });

}, 1000);