convert binary image data to base64 string from http response sent by FilePathResult ASP.net MVC

Question

An image file is sent from ASP.Net MVC using FilePathResult. How can this image be converted into a base64 string at client side (web browser) when http response is received. It is showing data in the raw form in response.data object. I've tried

var blob = new Blob([response.data], { type: 'image/jpeg' });
var reader = new FileReader();
reader.onloadend = function () {
     var base64data = reader.result;
     console.log(base64data);
}
reader.readAsDataURL(blob);

AFAIK, you can use the image directly using the raw base64 image. ex: <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAA............" /> — Fadhly Permata
– Fadhly Permata, Commented Feb 8, 2018 at 7:37
data: "��JFIF��C↵↵↵ ↵%# , #&')*)-0-(0%()(�................" — Shahzad
– Shahzad, Commented Feb 8, 2018 at 7:59
Above mentioned is the raw data received in response object. How can that be converted to base 64 string? — Shahzad
– Shahzad, Commented Feb 8, 2018 at 8:00
I think, this is great example for you: codeproject.com/Articles/201767/… — Fadhly Permata
– Fadhly Permata, Commented Feb 8, 2018 at 9:35

Endless · Accepted Answer · 2018-02-09 08:09:13Z

2

When you fetch the binary as text with ajax, browsers will try to parse the character set and change your data.

You must fetch the data as a blob to avoid to tell them not to

function getBase64(blob) {
  var blob = xhr.response
  var reader = new FileReader();
  reader.onload = function () {
       var base64data = reader.result;
       console.log(base64data);
  }
  reader.readAsDataURL(blob);
}

var xhr = new XMLHttpRequest()
xhr.open('GET', '/myfile.png', true)
xhr.responseType = 'blob'  // get data as blob
xhr.onload = function() {
  getBase64(xhr.response)
}
xhr.send()

// or if you are using fetch
fetch('/myfile.png')
  .then(function(res) {
    res.blob() // get data as blob
    .then(getBase64)
  })

answered Feb 9, 2018 at 8:09

Endless

38.8k14 gold badges118 silver badges138 bronze badges

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

Comments

Fadhly Permata · Accepted Answer · 2018-02-09 07:22:34Z

0

I hope I am not misunderstood:

Try this script, for the easier ajax I'm using jquery:

$.ajax({
    url: 'someImage.png',
    type: 'POST',
    success: function(r) {
        var data = btoa(r);
        $('img.photo').attr('src', "data:image/png;base64," + data);
    },
});

you can change above code as you need.

answered Feb 9, 2018 at 7:22

Fadhly Permata

1,68613 silver badges26 bronze badges

Collectives™ on Stack Overflow

convert binary image data to base64 string from http response sent by FilePathResult ASP.net MVC

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related