Convert from buffer to base 64 to read using angular

Question

Hello i have an app using the MEAN stack. I am getting from my end point for getting images. the image array value is looking like :

8,8,7,7,9,8,9,8,9,8,9,9,8,8,8,8,7,9,7,7,9,10,16,13,8,8,16,9,7,8,12,33,14,15,1

when i try to read using angular it doesn't work and it show the same.

I decided to use this function to convert it to base 64 so i can read it.

so in my controller i wrote like that :

export class MainController {

  constructor($http) {
    'ngInject';

    this.$http = $http;
    this.getMessages();
    this.getImages();
    this.arrayBufferToBase64 = function(buffer) {
      var binary = '';
      var bytes = new Uint8Array(buffer);
      var len = bytes.byteLength;
      for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
      }
      return window.btoa(binary);
    }


  }

and this is my function :

  getImages() {



    var vm = this;
    this.$http.get('http://localhost:5000/api/photo').then(function(result) {

      vm.images = result.data;
      console.log(result.data);

    });
  }

then in my front end angular page i am doing like that :

<img ng-src="data:image/png;base64,{{arrayBufferToBase64(image.img.data.data)}}" alt="" />

when i try to read my images like that . :

<img ng-src="{{image.img.data.data)}}" alt="" />

it show me error that it is binary

but then it still not working

can anybody help how i can read this images coming from my mongodb and my node api

score 0 · Answer 1 · edited May 23 '17 at 12:17

please check if data urls are supported by your browser. Current versions of most browsers do so, but it's not in official HTML standard afaik.

another issue is that you need another attribute, not ng-src. See Loading image src using a variable containing base64 data in AngularJS

you can also try to "debug" this by writing the base64 data to HTML output, and create your own .html file with an tag to check if there's a problem within your base64 img data.

score 0 · Answer 2 · answered Mar 02 '17 at 10:12

0

Set the responseType to 'blob':

 var config = { responseType: 'blob' };

 $http.get(url, config).then(function (response) {
     $scope.imageBlob = response.data;
 });

 <img ng-src="{{imageBlob}}">

answered Mar 02 '17 at 10:12

georgeawg

48,608
13
72
95

score 0 · Answer 3 · answered Mar 02 '17 at 21:19

UPDATE.. Actually i kept trying and trying until i found this solution:

first i found that i have to assign the function which transfer to base64 to my view model :

vm.arrayBufferToBase64 = function(buffer) {

  console.log(buffer);
  var binary = '';
  var bytes = new Uint8Array(buffer);
  var len = bytes.byteLength;
  for (var i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  return window.btoa(binary);
}

and then after i call my api which get for my the images i have to make a forEach loop to iterate through the result and then use my arrayBufferToBase64 function to convert the result and then assign to variable in the forEach loop and then i call it using angular.

this.$http.get('http://localhost:5000/api/photo').then(function(result) {


  result.data.forEach(
    function(x) {
      x.img.base64 = vm.arrayBufferToBase64(x.img.data.data);

    });

and then here i call it using angular for the view :

<li class="list-group-item" ng-repeat="image in main.images">



          <img data-ng-src="data:image/jpeg;base64,{{image.img.base64}}" />


        </li>

and it works Taraaaa

Convert from buffer to base 64 to read using angular

3 Answers3