I have a JavaScript array and I want to download each image in the array

Question

Context: I have a lot of images on my social media. I wanted to download all of the images from my social medias, so I made a script that takes all of the images links and puts them in an array (script is executed in the console ). So far it only works on Twitter and it scrolls every 2 seconds and grabs new links.

What I want to do: I want to be able to go through my array and download each image file all while staying in the console. How do I do that? (also being able to download videos if possible )

I googled the problem of course , but my knowledge is limited. I saw something about download tag but it only works in html There might be an easy way kinda of like url.download but I haven't found it

let timePassed = 0 ;
var listOfImages = [];
var videoThumb = "Video Thumb wasn't caught " ;
var timeToWait = 120 ; //You wait 120 before stopping scrolling and loging out the array 

var scroll = setInterval(function() { 
    timePassed += 2; //add 2 seconds to time passed 

    var getImage = document.querySelectorAll(".css-9pa8cd");    //Class that makes mhas the image with the url 

    for (let i = 2; i < getImage.length; i++) {
        let imageUrl = getImage[i].src ; 
        let newStrWithoutSmall  ; 

        if (imageUrl.includes("&name=small")) {
            if ((imageUrl.includes("video_thumb"))) {
                // To catch videos 
                videoThumb = "videoThumb was caught!";
            } else {
                // To catch the images they have &name=small in their url so we delete it 
                newStrWithoutSmall = imageUrl.substring(0, imageUrl.length - 11);
                listOfImages.push(newStrWithoutSmall);
            }
        }
    }

    if (timePassed > timeToWait) {
        clearInterval(scroll);
    }

    window.scrollBy(0,1000); // Scroll down by 1000px and 0on the side 
}, 2000);   //That means every 2 seconds 

var showListImageAndVideos = setTimeout(function() {    
        console.log(listOfImages); // Array of all of the images  
        console.log(videoThumb); // Array of all of the videos 
}, (timeToWait*1000)) //timeToWait

Answer 1

This may work in your case:

async function downloadFiles(array){
     array.map(async sUrl=>{

    await fetch(sUrl)
      .then(resp => resp.blob())
      .then(blob => {
        var fileName = sUrl.substring(sUrl.lastIndexOf('/') + 1, sUrl.length);
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = fileName;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
      })
      .catch(() => {});
    })
    };

Based on: http://pixelscommander.com/javascript/javascript-file-download-ignore-content-type/ Download File Using Javascript/jQuery Note: You may be better off just using a download manager like JDownloader.

Answer 2

Here you can use async/await to download each image sequentially in the for loop using fetch.

let timePassed = 0 ;
var listOfImages = [];
var videoThumb = "Video Thumb wasn't caught " ;
var timeToWait = 120 ; //You wait 120 before stopping scrolling and loging out the array 

function toDataURL(url) {
  return fetch(url).then((response) => {
    return response.blob();
  }).then(blob => {
    return URL.createObjectURL(blob);
  });
}

async function download(image) {
  const a = document.createElement("a");
  a.href = await toDataURL(image);
  a.download = image;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

var scroll = setInterval( async function() { 
    timePassed += 2; //add 2 seconds to time passed 

    var getImage = document.querySelectorAll(".css-9pa8cd");    //Class that makes mhas the image with the url 

    for (let i = 2; i < getImage.length; i++) {
        let imageUrl = getImage[i].src ; 
        let newStrWithoutSmall  ; 

        if (imageUrl.includes("&name=small")) {
            if ((imageUrl.includes("video_thumb"))) {
                // To catch videos 
                videoThumb = "videoThumb was caught!";
            } else {
                // To catch the images they have &name=small in their url so we delete it 
                newStrWithoutSmall = imageUrl.substring(0, imageUrl.length - 11);
                listOfImages.push(newStrWithoutSmall);
                await download(newStrWithoutSmall);
            }
        }
    }

    if (timePassed > timeToWait) {
        clearInterval(scroll);
    }

    window.scrollBy(0,1000); // Scroll down by 1000px and 0on the side 
}, 2000);   //That means every 2 seconds