Transcode Byte Array into Base64 String Using AngularJS

Question

Transcode Byte Array into Base64 String Using AngularJS

I am receiving a byte array in the service response, and I need to display that image in an image field on my HTML page. Can anyone provide guidance on how to implement this? I have searched for solutions on Stack Overflow but have not found a valid solution yet. Here is my code snippet:

this.getPrescription = function(pres_id) {
     var deff = $q.defer();
     $http({
           method: "GET",
           url: "www.abc.com/api/&prescriptionOnly=false&page=1",
           headers: {
           'Authorization': 'Bearer ' + localStorage.getItem("chemist_access_token"),
           'Content-Type': 'application/json'
           },
           responseType: 'arraybuffer'
           }).then(function(objS) {
                   console.log("getPrescription:\n" + JSON.stringify(objS))
                   deff.resolve(objS);
                   }, function(objE) {
                   errorHandler.serverErrorhandler(objE);
                   deff.reject(objE);
                   });
     return deff.promise;
     };

In my controller, I am calling it like this:

$scope.getPrescription = function(id) {
    $ionicLoading.show({
        template: '<ion-spinner icon="spiral"></ion-spinner>',
        noBackdrop: false
    });
    serverRepo.prescriptionGet(id).then(function(objS) {
        console.log("orderByCustomer:\n" + JSON.stringify(objS));
        $scope.picdata=$window.URL.createObjectURL(new Blob([objS.data], {type: 'image/png'}));

        $ionicLoading.hide();
        console.log("getOrderByNew_success_loadMore:\n" +$scope.picdata);
    }, function(objE) {
        $ionicLoading.hide();
    });
}

Upon checking my console, it displays the following message: getOrderByNew_success_loadMore: blob:file:///0aa86d9f-61a1-4049-b18c-7bf81e05909f

javascript angularjs cordova base64 arrays

Answer 1

Answer №1

Convert a byte array to base64 with this handy filter:

app.filter('bytetobase', function () {
    return 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);
    };
});

To display the converted image, use:

<img ng-src="data:image/JPEG;base64,{{picture | bytetobase}}" alt="..." width="100" height="100">

If you need to save the base64 string in a variable, do this:

var image = $filter('bytetobase')($scope.picture );

Answer 2

Convert a byte array to base64 with this handy filter:

app.filter('bytetobase', function () {
    return 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);
    };
});

To display the converted image, use:

<img ng-src="data:image/JPEG;base64,{{picture | bytetobase}}" alt="..." width="100" height="100">

If you need to save the base64 string in a variable, do this:

var image = $filter('bytetobase')($scope.picture );

Answer 3

Answer №2

If you ever find yourself in need of displaying an image from a byte array, one way to do so is by creating an object using Blob and obtaining its URL to pass into the image tag source. It's important to set the correct type during blob creation by specifying the type in the last parameter of the Blob constructor.

$http.get(url, {responseType: 'arraybuffer'})
  .then(function(response) {
    return $window.URL.createObjectURL(new Blob([response.data], {type: 'image/png'}));
  });

Once you no longer require working with your object (e.g. after the image has loaded in the appropriate img tag), you can update it as needed.

Update

An alternative solution involving base64

$scope.getPrescription = function(id) {
  $ionicLoading.show({
    template: '<ion-spinner icon="spiral"></ion-spinner>',
    noBackdrop: false
  });
  serverRepo.prescriptionGet(id).then(function(objS) {
    console.log("orderByCustomer:\n" + JSON.stringify(objS));
    // Creating file reader
    var reader = new window.FileReader();
    // Creating blob from server's data
    var data = new Blob([objS.data], {type: 'image/jpeg'});
    // Start reading data
    reader.readAsDataURL(data); 
    // Once all data is read
    reader.onloadend = function() {
      // Set image source
      $scope.picdata = reader.result;
      // Trigger digest loop
      $scope.$apply();
    }

    $ionicLoading.hide();
    console.log("getOrderByNew_success_loadMore:\n" +$scope.picdata);
    }, function(objE) {
    $ionicLoading.hide();
  });
}

Answer 4

If you ever find yourself in need of displaying an image from a byte array, one way to do so is by creating an object using Blob and obtaining its URL to pass into the image tag source. It's important to set the correct type during blob creation by specifying the type in the last parameter of the Blob constructor.

$http.get(url, {responseType: 'arraybuffer'})
  .then(function(response) {
    return $window.URL.createObjectURL(new Blob([response.data], {type: 'image/png'}));
  });

Once you no longer require working with your object (e.g. after the image has loaded in the appropriate img tag), you can update it as needed.

Update

An alternative solution involving base64

$scope.getPrescription = function(id) {
  $ionicLoading.show({
    template: '<ion-spinner icon="spiral"></ion-spinner>',
    noBackdrop: false
  });
  serverRepo.prescriptionGet(id).then(function(objS) {
    console.log("orderByCustomer:\n" + JSON.stringify(objS));
    // Creating file reader
    var reader = new window.FileReader();
    // Creating blob from server's data
    var data = new Blob([objS.data], {type: 'image/jpeg'});
    // Start reading data
    reader.readAsDataURL(data); 
    // Once all data is read
    reader.onloadend = function() {
      // Set image source
      $scope.picdata = reader.result;
      // Trigger digest loop
      $scope.$apply();
    }

    $ionicLoading.hide();
    console.log("getOrderByNew_success_loadMore:\n" +$scope.picdata);
    }, function(objE) {
    $ionicLoading.hide();
  });
}

Transcode Byte Array into Base64 String Using AngularJS

Answer №1

Answer №2

Similar questions

Using Angular with a hapi.js server that supports JSONP data requests

express-session is failing to maintain persistence and refusing to transmit a cookie to the browser

Creating a script that automatically launches the terminal and executes specific commands

Using jQuery to retrieve a file that has been uploaded through an input field with the type of 'file'

How do I extract a specific property from an array of objects and assign it to a new array in Typescript 2?

Creating a custom service that utilizes $cacheFactory

Monitor the true/false status of each element within an array and update their styles accordingly when they are considered active

Is there a way for me to showcase the most recently added item above the existing one?

Incorporating <span> elements into a comma-separated list using Jquery on every other item

Leverage the power of npm to utilize various javascript libraries for

Select a Date: Input for Date Selection

Incorporating External JavaScript and CSS specifically for a single component

Having difficulty resolving all parameters for the component: (?, [object Object]) in the Jasmine component Unit Test

Using the ui-router to repeatedly call an AngualrJS directive

Conditional rendering with React.js in the DOM

Utilizing AngularJS to achieve similar functionality to window.bind()

Can I retrieve the element of any DOM element I'm currently hovering over using JavaScript?

Error: Unable to convert undefined or null values to an object - encountered while attempting to run a MySQL query within the router

Hold on for the completion of Angular's DOM update

When utilizing the `useLocation` hook, the location information appears to be missing