Home > Software engineering >  convert base64 formatted data to image using AngularJs
convert base64 formatted data to image using AngularJs

Time:10-08

I'm trying to convert base64 formatted data to image using AngularJs but I'm getting an error I would be very grateful if you could help me on how to do it.

 $http({
        method: 'GET',
        url: '/Home/GetEmployeeDetail',
        params: { ID: $scope.PersonID }
    }).then(function (result) {
        $scope.TC = result.data.TC;
        $scope.Name = result.data.Name;
        $scope.LastName = result.data.LastName;
        $scope.DateOfBirth = new Date(result.data.DateOfBirth.match(/\d /)[0] * 1);
        $scope.Email = result.data.Email;
        $scope.Address = result.data.Address;
        var base64 = result.data.Image;
        console.log(base64);
     
        var imgbase64 = atob(base64);
        console.log(imgbase64);
        var imglength = imgbase64.length;
        var arrayBuffer = new ArrayBuffer(imglength);
        var uintArray = new Uint8Array(arrayBuffer);
        for (var i = 0; i < imglength; i  ) {
            uintArray[i] = imgbase64.charCodeAt(i);
        }
        $scope.img = uintArray;
 <div class="profile-images" style="width:90px ; height:90px">
                        <img ng-src="{{img}}" />
                    </div

CodePudding user response:

You don't need any modifications to a base64 string to set it in ng-src. Check out the following plunkr: https://plnkr.co/edit/WwnZ7mEvDXynb9M3

Just pass the string directly from the backend to ng-src.

$http({
        method: 'GET',
        url: '/Home/GetEmployeeDetail',
        params: { ID: $scope.PersonID }
    }).then(function (result) {
        var base64 = result.data.Image;
  
        $scope.img = base64;
  • Related