HTML5/Javascript code to download a image from the page browser?

Question

I need javascript code to download all images in a web page. Is there a way to do it ?

When the browser loads the page, there might be some images in that page, how to list all of them and download? I mean this should not involve sending request to server. As, the browser has loaded the images, I need to download the images from the browser not the server. How can it be done?

Answer 1

You can get all images and draw it on canvas and then use getImageData to get content. See this link

Answer 2

You can get a list of all the urls or iterate through the images like this

var images = document.getElementsByTagName("img");

var urls = [];

Array.prototype.forEach.call(images, function (image) {
    if (image.src.length > 0) {
        urls.push(image.src);
    }
});

console.log(urls);

A live example is available on jsfiddle

It is also possible to save images to disk, see t his example , but not when they come from another domain.

Here is an updated fiddle that shows the cross domain security error.

Same Origin Policy
Same-origin policy