How to get urls of all images on a page, edit them and download

Question

Here is a task:

A page has 300 JPEG images with urls like http://example.com/gallery/500px-500px/7496.jpg

I want to do edit those urls to http://example.com/gallery/1000px-1000px/7496.jpg

and download in better quality.

How I achieve the task now: I open a web page and download all images to a folder with any download manager. Then I create a list of the image's names with cd c:\download + dir *.* > list.txt commands and add the url http://example.com/gallery/1000px-1000px/ bore the files' names. After that I download the new urls using any file manager.

How to make this process of downloading easier and faster? Thanks!

Answer 1

I've written a Google Chrome extension to download files from a list you paste in, or from the URLs of open tabs in a window.

It's called TabSave, available here and open source (see the webstore description).

Zeel's answer seems perfectly fine. There'll be lots of other tutorials on how to get links from a webpage if you give it a quick search online. Chrome extension security settings make it awkward to communicate with the page, but once you have that list of URLs this extension can handle the downloads.

Answer 2

The easiest way is to make a script in some language that is comfortable to you.

A possibility is to have a bookmarklet that does this, written in Javascript. It uses the DOM to rewrite the URLs and then you download the full webpage with the URLs rewritten.

You can try with something like this:

javascript:(function() {
  var i, imgs;
  imgs = $$('img');
  for (i=0; i < imgs.length; i++){
    imgs[i].src = imgs[i].src.replace('500px-500px', '1000px-1000px');
  }
})();

Another possibility is to use a server language (e.g. Python) in your computer that will get the webpage and then the images, but that requires to install an interpreter or something.

You should define a link like this in your bookmarks bar: [Big images!][1]

[1]: javascript:(function(){var i, imgs; imgs = $$('img'); for (i=0; i < imgs.length; i++){ imgs[i].src = imgs[i].src.replace('500px-500px', '1000px-1000px');}})();

Answer 3

While Trylks is on the right track, I'll add my own method. . .

This script can be run by simply pasting it into the console. Hit F12 to open the dev tools, and click the second button in at the bottom (a > with three lines) to open the console.

The variables at the top can be changed to fit the situation. . .

//  User Variables  //

var IMG = true;         //True if the images are on the page as <img> elements, set to false if there are only anchor <a> links.
var TYPE = 'jpg';       //Only important when img is false, Set to the file extension of the files.

var NEWFOLDER = 'http://example.com/gallery/1000px-1000px'  //This is the folder you expect to find the new images in. It should *not* end in a '/'.

//  Begin Script    //

function getURLs() {    //Returns an array of URLs from either <img> or <a> elements for the images.
    var URLs = [];
    if (IMG) {  //If we are dealing with <img> elements. . .
        var imgs = document.getElementsByTagName('img');    //Grab the <img>'s
        for (var i in imgs) {   //Loop through them
            URLs.push(imgs[i].src); //Put the src into an array
        }
    }
    else {  //Or else we are using <a> elements.
        var reg = new RegExp('.*\.' + TYPE + '$');  //Create a regular expression to make sure this is an image (of the type defined)
        var imgs = document.getElementsByTagName('a');  //Grab the <a>'s

        for (var i in imgs) {   //Loop through them
            if (reg.test(imgs[i].href)) {   //Test that this is an image 
                URLs.push(imgs[i].href);    //Put the href in the array
            }
        }
    }

    return URLs;
}

function parseNames(urls) { //Returns an array of names
    var reg = new RegExp('^http.*\/(.*\..*)$');
    var names = [];

    for (var i in urls) {   //Loop through the urls
        if (urls[i]) {  //In case of undefined members
            names.push(reg.exec(urls[i])[1]);
        }
    }

    return names;
}

function makeLinks(files) { //Replaces the page with a list of links
    var body = document.getElementsByTagName('body')[0];    //Get the <body>
    body.innerHTML = '';    //Delete all the page content

    for (var i in files) {  //Loop through the files
        var path = NEWFOLDER + '/' + files[i];

        var link = document.createElement('a'); //Create <a>'s
        link.href = path;
        link.innerHTML = path;

        body.appendChild(link); //Append the links to the document
        body.appendChild(document.createElement('br'));
    }
}


makeLinks(parseNames(getURLs()));

This will replace your page with a list of URLs to the files you want. Simply paste those links into your download manager.

Unfortunately there is no way to make JS start the downloads without server side help, so the best this can do is give you a list.