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?

The standard way is to instruct the browser to download from the server, and letting the browser see that the images are in cache so it doesn't really make a request. — Denys Séguret, Apr 18 '13 at 08:24

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

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

edited May 23 '17 at 12:29

Community

1
1

answered Apr 18 '13 at 08:22

karaxuna

26,752
13
82
117

No, it still gets the image from the server only. – Abhi Ram A Apr 18 '13 at 09:27
I get this error while doing it Security error : DOM Exception 18 . Why is that ? – Abhi Ram A Apr 18 '13 at 11:07
@AbhiRamA take a look at this post: http://stackoverflow.com/questions/2704929/uncaught-error-security-err-dom-exception-18-when-i-try-to-set-a-cookie – karaxuna Apr 18 '13 at 12:02

Xotic750 · Answer 2 · 2013-04-18T11:57:47.237

0

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 this 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

edited Apr 18 '13 at 11:57

answered Apr 18 '13 at 08:33

Xotic750

22,914
8
57
79

It gives an error like Uncaught Error: SecurityError: DOM Exception 18 . Why is that and how can it be solved ? – Abhi Ram A Apr 18 '13 at 11:14
It's a feature. Updated with a couple of links – Xotic750 Apr 18 '13 at 11:56
1

So, you are saying that there is no way to download images from another domain programmatically ? – Abhi Ram A Apr 18 '13 at 11:59
It can be done from a browser extension as far as I know, but not in the browser window. – Xotic750 Apr 18 '13 at 12:00
apparently they can't be downloaded from a subdomain either. – Michael Mar 31 '20 at 02:37

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

2 Answers2