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

you can just "save webpage, complete", and get all the images shown on the page from the assets folder that results. — dandavis, Aug 20 '19 at 20:53
The code you've presented is irrelevant to the question. Simply providing an array of images and asking how can I download each image from the console is just as sufficient in solving your problem. I believe node.js is more suitable for the task using a headless browser and curl library to download the image. — Joseph Persico, Aug 21 '19 at 00:13

score 0 · Answer 1 · answered Aug 20 '19 at 21:13

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.

Joseph Persico · Answer 2 · 2019-08-21T00:42:57.990

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

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

2 Answers2