Downloading an image using XMLHttpRequest in a userscript

Isuru
2012-01-08 15:46
3

First of all there is a question with the same title here on SO but its not what I'm looking for and it doesn't have a complete answer either.

So here's my question. Say I have this URL which directs to an image.

https://fbcdn-photos-a.akamaihd.net/hphotos-ak-ash4/299595_10150290138650735_543370734_8021370_355110168_n.jpg

Once I put this parameter ?dl=1 to the end of the URL, it becomes downloadable.

https://fbcdn-photos-a.akamaihd.net/hphotos-ak-ash4/299595_10150290138650735_543370734_8021370_355110168_n.jpg?dl=1

I'm trying to do this task through a userscript. So I used XMLHttpRequest for that.

var url = "https://fbcdn-photos-a.akamaihd.net/hphotos-ak-ash4/299595_10150290138650735_543370734_8021370_355110168_n.jpg?dl=1";

var request = new XMLHttpRequest();  
request.open("GET", url, false);   
request.send(null);  

if (request.status === 200) 
{  
    alert(request.statusText);
}

Here is a fiddle.

But it does not work.

3 Answers

You are trying to request a resource using XHR that is on a different domain and is thus blocked. Use CORS for cross-domain messaging using XHR.

javascript, As for getting and using the actual image data, that is a major pain to work out. You can use the new .responseType = "blob"; functionality in Firefox but Chrome does not yet support it. In Chrome or Firefox, for the same domain only, you can use the new XHR2 like so: See it in action at jsBin. XMLHttpRequest will not work cross-domain, but since this is a userscript Chrome now supports GM_xmlhttpRequest() in userscripts only.

Klemen Slavič

2012-01-08 15:56

Krof Drakula is right, you cannot load an image from a different domain, but do you really need to do this? You can create and append an img tag and wait for it to load (with something like jQuery load()).

var img = document.createElement( 'img' );
img.setAttribute( 'src', url );
document.getElementsByTagName('body')[0].appendChild( img );

load image with xhr, Loading images with XHR Request. 3. Can I get the data of a cross-site <img/> tag as a blob? 2. Getting jQuery and GM_addStyle to work in a Chrome userscript based Loading images with XHR Request. 3. Can I get the data of a cross-site <img/> tag as a blob? 2. Getting jQuery and GM_addStyle to work in a Chrome userscript based

Daniel J F

2012-01-08 16:07

Modern browsers have the Blob object:

GM_xmlhttpRequest({
  method: "GET",
  url: url,
  headers: { referer: url, origin: url },
  responseType: 'blob',
  onload: function(resp) {
    var img = document.createElement('img');
    img.src = window.URL.createObjectURL(resp.response);
    document.body.appendChild(img);
  }
});

The headers param will set the referrer so you can load referrer locked images.

xmlhttprequest download file, This is a good solution for small files, but notice that this puts the whole file in memory before sending it to disk, so take that into account if downloading very large files. Also the user won't be able to see the progress of the actual download (like in Chrome's statusbar), what they'll see is the progress of the "download" from memory to This is a good solution for small files, but notice that this puts the whole file in memory before sending it to disk, so take that into account if downloading very large files. Also the user won't be able to see the progress of the actual download (like in Chrome's statusbar), what they'll see is the progress of the "download" from memory to

ariel

2018-10-07 17:39