Download Images from image url stored in array with javascript or best alternative

user_12297688 0
Viewed 525

Hey everyone I am trying to download images I have displayed on my react app. The app gets images from an API and displays them on the webpage and also stores the img src in an array. I'm trying to make a download button that will loop through my src array and download all images displayed and need some guidance. I have read many previous posts and realized I am not able to use cURL within my react app and the fetch API does not download the images. I'm trying to see if there is a way to do this with Javascript or is there a simple alternative with another programming language. Thank you for your help!

const downloadAll = () => {
        const imgArr = document.querySelectorAll('img');
        for (let i = 0; i < imgArr.length; i++) {
            let a = imgArr[i].src;
        }
    };

api image download html javascript
1 Answers

Using the download attribute of an anchor should do the trick...

EDIT

download only works for same-origin URLs, or the blob: and data: schemes. ref

Since this is not your case, you will have to create a blob with each image and fortunately, that is easy with the fetch API.

const downloadAll = async () => {
  // Create and append a link
  let link = document.createElement("a");
  document.documentElement.append(link);

  const imgArr = document.querySelectorAll("img");
  for (let i = 0; i < imgArr.length; i++) {
    await fetch(imgArr[i].src)
      .then(res => res.blob()) // Gets the response and returns it as a blob
      .then(blob => {

        let objectURL = URL.createObjectURL(blob);

        // Set the download name and href
        link.setAttribute("download", `image_${i}.jpg`);
        link.href = objectURL;

        // Auto click the link
        link.click();
    })
  }
};

Tested on CodePen.

user_21595280
Related