how to read a binary data in angularjs

Question

I've written an api service which fetch a binary data from $http. The problem is I don't know how to used that data to display the image. PS: the binary data is actually an image.

This is my service api

getAvatar: function() {
    return $http({
      method  : 'GET',
      url     : 'domain.com',
      headers : {'Content-Type' : 'application/json'}
    });
  }

My controller

//get avatar
$scope.userAvatar = function() {
    Api.getAvatar()
    .then(function(result) {
        //success
        console.log(result.data); //this is the binary data
        $scope.avatarImage = result.data;
        }

    }, function(result) {
        //errors
    });

};

At first I thought that result that the api will give me is a url but it turns out a binary. Do I have to convert it first?

If your API is built to return binary data, then surely if it is an image and encoded properly, why use ajax? why not simply set this as the src of an IMG element? — Richard
– Richard, Commented Aug 27, 2013 at 8:39

codef0rmer · Accepted Answer · 2013-08-27 08:37:12Z

4

I assume your service may be returning the base64 encoded string of data for any image which you then bind it to avatarImage in your controller.

Then simply write in html:

<img ng-src="{{avatarImage}}"/>

answered Aug 27, 2013 at 8:37

codef0rmer

10.5k9 gold badges55 silver badges78 bronze badges

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

2 Comments

user2720708 Over a year ago

it turns out its pretty straight forward. Haha. thanks for all the help :)

Sarin Suriyakoon Over a year ago

Wow you made my day!

SoWhat · Accepted Answer · 2013-08-27 08:39:11Z

2

you can do this by creating a new image element

$img=$("<img src='data:image/gif;base64,"+result.data+"'/>"); //Assuming that the image was encoded as base64. Try this

$elem.append($img) whereever you want to insert it

answered Aug 27, 2013 at 8:39

SoWhat

5,6222 gold badges30 silver badges63 bronze badges

Comments

Norbert Pisz · Accepted Answer · 2013-08-27 09:34:11Z

0

Chek out ngSrc

Here is a example:

 <div ng-controller="Cont">
      <img ng-src="{{imageSource}}">
 </div>

answered Aug 27, 2013 at 9:34

Norbert Pisz

3,4403 gold badges30 silver badges43 bronze badges

Collectives™ on Stack Overflow

how to read a binary data in angularjs

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related