Angular web api byte array to image

Hi llkin,

Convert the image to Base64 on your server:

[Route("api/profileimage/{userId}")]
public string Get(string userId)
{
var image = _profileImageService.GetProfileImage(userId);
return System.Convert.ToBase64String(image);
}

For ease of use I created a new directive to encapsulate all the code we need for getting and displaying the image:

import {Directive, OnInit, Input} from '@angular/core';
import {Http} from '@angular/http';
import {BROWSER_SANITIZATION_PROVIDERS, DomSanitizationService} from '@angular/platform-browser';
@Directive({
selector: '[profile-image]',
providers: [BROWSER_SANITIZATION_PROVIDERS],
host: {
'[src]': 'sanitizedImageData'
}
})
export class ProfileImageDirective implements OnInit {
imageData: any;
sanitizedImageData: any;
@Input('profile-image') profileId: number;
constructor(private http: Http,
private sanitizer: DomSanitizationService) { }
ngOnInit() {
this.http.get("http://localhost:2116/api/ProfileImage/" + profileId)
.map(image => image.text())
.subscribe(
data => {
this.imageData = 'data:image/png;base64,' + data;
this.sanitzedImageData = sanitizer.bypassSecurityTrustUrl(imageData);
}
);
}
}

In your template include it like this:

"tile.UserId" width="100" height="100" />

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Ravishankar N7y ago
Hi llkin,
Convert the image to Base64 on your server:

[Route("api/profileimage/{userId}")]

public string Get(string userId)

{

    var image = _profileImageService.GetProfileImage(userId);



    return System.Convert.ToBase64String(image);

}

For ease of use I created a new directive to encapsulate all the code we need for getting and displaying the image:
import {Directive, OnInit, Input} from '@angular/core';

import {Http} from '@angular/http';

import {BROWSER_SANITIZATION_PROVIDERS, DomSanitizationService} from '@angular/platform-browser';



@Directive({

  selector: '[profile-image]',

  providers: [BROWSER_SANITIZATION_PROVIDERS],

  host: {

    '[src]': 'sanitizedImageData'

  }

})

export class ProfileImageDirective implements OnInit {

  imageData: any;

  sanitizedImageData: any;

  @Input('profile-image') profileId: number;



  constructor(private http: Http,

              private sanitizer: DomSanitizationService) { }



  ngOnInit() {

    this.http.get("http://localhost:2116/api/ProfileImage/" + profileId)

      .map(image => image.text())

      .subscribe(

        data => {

          this.imageData = 'data:image/png;base64,' + data;

          this.sanitzedImageData = sanitizer.bypassSecurityTrustUrl(imageData);

        }

      );

  }

}

In your template include it like this:
"tile.UserId" width="100" height="100" />
0
Elavarasan R7y ago
Hi,
check it out below links..

References:
https://javaee.ch/2017/02/11/send-and-image-from-the-java-backend-to-angular-using-rest-services/
https://www.aspsnippets.com/Articles/Display-Byte-Array-as-Image-using-ng-src-in-AngularJS.aspx
http://www.macaalay.com/2014/09/26/rendering-images-from-byte-arrays-and-converting-images-to-byte-arrays-using-angularjs/

Video Reference:
https://www.youtube.com/watch?v=Ftq_QpnnGus
+1
Rajanikant Hawaldar7y ago
Correct me if I understand wrong https://www.aspsnippets.com/Articles/AngularJS-Display-Byte-Array-content-as-Image-in-ASPNet-MVC.aspx
0