CODEWITHSUNDEEP
javascriptimagedownloadbackground
Rom
Rom

Reputation: 33

Download three 1st images from a URL in background

I'm actually trying to find a way in a js script to downloading the three first images from a specifiq URL.

I have find this way to download img file as a new filename, but this script don't limit the imgs downloads to three: download-data-url-file.

Why only the three images from an URL ? Because i would like to setup later a sort of timer to repeat the downloading task.

The URL is a content feed (http://feed.500px.com/500px-best)

Basically, the img source URL is avalaible if we enter in the Inspector tool on Firefox, we can see the URL source for a give image like:

<img xmlns="http://www.w3.org/1999/xhtml" src="https://drscdn.500px.org/photo/266885357/m%3D900/v2?webp=true&amp;sig=b5a6df5651c4248defdeee0f5b4d1ec599d87d5fa69e7673b5d64cef5a4deeb7" />

So the js script will take the first image from the website, and download the .png image as a newfilename.png (just an filename exemple), reapeat the step for a second and a third image, and stop to run.

There is an short js that i have modded for my task, i assume that i can improve it by adding an var totalImages = 3 to limiting the total img downloads..

var data = canvas.toDataURL("http://feed.500px.com/500px-best/jpeg");
var img = document.createElement('img');
img.src = data;

var a = document.createElement('a');
a.setAttribute("download", "Image1.jpeg");
a.setAttribute("href", data);
a.appendChild(img);

Thank in advance.

Upvotes: 0

Views: 234

Answers (1)

Dinesh Verma
Dinesh Verma

Reputation: 666

// This code is very specific to 500PX
// I had to use itemcontent selector, as the feed was giving small icons
// as first three images.

var parents = document.getElementsByClassName("itemcontent");
var totalImages = 3;
var done = false;
var result = [];

for(var i = 0; i < parents.length && !done; i++) {
  var images = parents[0].getElementsByTagName("img");

  for(var j = 0; j < images.length && !done; j++) {     
    result.push(images[j].src);
    if(result.length == totalImages)
        done = true;    
  }
}

// The result array contains the first three images of the page.

Upvotes: 0

Related Questions