Web Scraping all images from a web page using JavaScript

Here in this article I am going to show you how to web scrape all images from a web page using async/await function in JavaScript. You can web scrape images without using any third party tool, library or application. More over, this method is not limited to a particular browser. You can run the script on any browser and get the result.

➡️ Before web scraping a website, please make sure that the site you are scraping, allows web scraping. Don't do it otherwise. Do it ethically.

The method is simple. But first, you need to identify two things. 1st, the web page and 2nd the HTML element, within which the images are embedded.

Usually, images are shown on a web page using the <img /> tag or you can add images dynamically using a code in JavaScript, jQuery etc.

Assuming, images are added using the <img /> tag in this particular web page. Here's the script to scrape the web page and extract all the images.

<body>
  <!--show extracted images here-->
  <div id='container' style='padding:10px; border:solid 1px #ddd;'></div>
</body>

<script>
  // the web page to scrape. you can change the url.
  const url = 'https://www.encodedna.com/bing/how-to-create-ai-images-using-bing-ai.htm';
  
  const web_scrape = async() => {  // the async function.
    let response = await fetch (url);
    const ar = await response.text();
    
    let webPage = new DOMParser().parseFromString(ar, 'text/html');

    // get all IMG elements.
    const art_img = webPage.getElementsByTagName('img');    
    if (art_img.length > 0) {
       for (let i = 0; i <= art_img.length - 1; i++) 
        {
          if (art_img[i].src != undefined) 
          {
            let img = new Image();
            img.src = art_img[i].src;

            document.getElementById('container').appendChild(img);
          }
        }
    }
  }
  
  web_scrape();
</script>
</html>

Try it

As you can see, I do not have know if any CSS class is attached to the IMG tags or not. I am using .getElementsByTagName('img') method to get all the images from the web page.

The .getElementsByTagName() method returns a collection of all the elements with a specified tag.

Using async and await function, I am making an asynchronous request to the server for data with the URL. If the request is a success, it sends the HTML document (the web page).

The response is stored in an array (const ar).

The parseFromString() method of DOMParser interface is used to parse XML or HTML source. In the above script, I am parsing the HTML source of the web page. Once I have the source (the HTML elments, element attribute, contents etc.), I'll locate the elements with "IMG" tag (const art_img = blogPage.getElementsByTagName('img');).

Finally, we'll loop through each tag, get the source of each image and display it.

What I also like about the above script, is that you can perform web scraping easily, without worrying about which browser to choose. However, make sure the web site or the web page you are trying to scrape allows web scraping.

← Previous