Download image with Javascript and convert it to a Blob

Question

With HTML5 and FileReader/Blob I can convert from/to Blobs/dataURIs, but I'm wondering if I can download an image from a remote URL and convert it to a Blob (or a dataURI).

If this is possible, how would I do it?

@dandavis Not very helpful, but it gave me a clue where to look at. — Alexander Nestorov
– Alexander Nestorov, Commented Jul 1, 2015 at 21:18
if you would have posted code, i could have fixed it for you. i could have been more specific i guess, but i'm glad you got it working. — dandavis
– dandavis, Commented Jul 1, 2015 at 22:04

Alexander Nestorov · Accepted Answer · 2015-07-01 21:19:45Z

4

I managed to do it myself:

var xhr = new XMLHttpRequest();
xhr.open('GET', attr.ngfDefaultSrc, true);
xhr.responseType = 'blob';

xhr.onload = function(e) {
   if (this.status !== 200) return;
   var blob = new Blob([this.response], {type: this.response.type});
   //rest of the code that uses the blob goes here
};

xhr.send();

answered Jul 1, 2015 at 21:19

Alexander Nestorov

15.2k25 gold badges110 silver badges219 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dandavis Over a year ago

this.response is already a blob, and the mime should be set already by the Content-Type header, so you probably don't need the extra step of concating the blob into a new blob. var blob=this.response;

Collectives™ on Stack Overflow

Download image with Javascript and convert it to a Blob

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related