How to get Blob from local image URL?

Question

I have local image URL and I want to get the blob from it.

The only way I found was to do HTTP request 'get' on the local URL, and read the returned blob... but this is such a strange way.

The code snippet using HTTP:

 function readBody(xhr) {
    var data;
    if (!xhr.responseType || xhr.responseType === "text") {
        data = xhr.responseText;
    } else if (xhr.responseType === "document") {
        data = xhr.responseXML;
    } else {
        data = xhr.response;
    }
    return data;
}

var xhr=new XMLHttpRequest();
xhr.open('GET',results[i],true);
xhr.responseType='blob';
xhr.send();
xhr.onreadystatechange=function()
{
    var blob;
    if(xhr.readyState==4)
    {
        blob=readBody(xhr);
        uploadPhoto(blob,storageRef);

    }
};

Because the file is local... What is the meaning of get request on local URL? — Dandan
– Dandan, Commented Dec 9, 2016 at 14:02
@Dandan It's a web browser. It doesn't to local file system at all. — BanksySan
– BanksySan, Commented Dec 9, 2016 at 14:04

Pixelomo · Accepted Answer · 2017-02-28 16:38:57Z

1

Your image needs to be converted to base64 and then from base64 in to binary. This is done using .toDataURL() and dataURItoBlob()

It's pretty fiddly process, I've created a tutorial you can follow which walks you through the process.

edited Feb 28, 2017 at 16:38

answered Dec 9, 2016 at 14:03

Pixelomo

6,8354 gold badges49 silver badges62 bronze badges

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

1 Comment

Dandan Over a year ago

Thank you for helping! The link is broken, can you fix it please?

Collectives™ on Stack Overflow

How to get Blob from local image URL?

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