How to Scrap and Download all images of a webpage using JavaScript

Sometimes you may need to download lots of images from a website. Downloading lots of images from a website can take a lots of time. You may find many browser extension which will allow you to download all images at once but again filtering those images is hassle work.

Last year my company was in need of downloading all product images from an online grocery e-commerce site but we didn't want to wait for so long to download those images. So, I did this JavaScript trick to download all images from that website. If you have some javascript knowledge and you are in need of downloading images from a website like e-commerce or social platforms then this article will help you to do so. 

For this tutorial we will use https://shop.marketplacefresh.com.au/fruit this webpage to scrap and download images.

The First step is to collect URL of all desired images you want to download. 

let imgDivs = document.getElementsByClassName("categorylistproduct");
let urls = [];
for(let i = 0; i < imgDivs.length; i++){
    urls.push(imgDivs[i].getElementsByTagName("img")[0].src);
}

The above code snippets will extract all image URL's and store it into urls variable. This is up to you from which website you want to scrap images you will have to write your own code. 

When you will have all image URL's then paste the below codes in the console of your browser. Make sure you are in the same website when you paste the code in the console.

let index = 0;

let x = setInterval(function(){

    let imgUrl = urls[index];
    let imgName = imgUrl.split('/').pop(); 
    
    let link = document.createElement('a');
    link.href = imgUrl;
    link.download = imgName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    index++;
  
    if(index == urls.length) clearInterval(x);
  
}, 500);

The above code snippets takes each of your image URL and download them in every 500ms. I put a small 500ms delay to download each image here you may want to change it but it is ideal to put a small break after every download.

Note: while downloading the browser may ask you to allow downloading multiple images.