0

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.

Rom
  • 33
  • 3

1 Answers1

0
// 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.
Dinesh Verma
  • 585
  • 5
  • 8
  • Thank you, i tried on the answer on this topic: https://stackoverflow.com/questions/10473932/browser-html-force-download-of-image-from-src-dataimage-jpegbase64, without the `var w = open();` function but i have no idea on how to limit the images downloads. By your method, how to specifiy the URL address (http://feed.500px.com/500px-best) ? And how to define the output filename ? Thank you again. – Rom Jul 22 '18 at 15:12
  • Dude I think you are planning to create a tool with which you can download images from the specified URL. The code snippet provided to you works only when added to the console. You can't create sucha thing in nativeJS unless you go for NodeJS. – Dinesh Verma Jul 23 '18 at 17:17