Hello, I am using Ionic 3 and working with a REST API that sends image as byte stream.
byte[] contents = IOUtils.toByteArray(new FileInputStream(file));
HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.parseMediaType("image/png"));
String filename = file.getName();
headers.setContentDispositionFormData(filename, filename);
ResponseEntity<byte[]> response = new ResponseEntity<byte[]>(contents, headers, HttpStatus.OK);
return response;
With fiddler, the output ImageView is ok.
How do I convert the above to a base64 image data for display in my ionic app?
I have tried a few methods:
myWsService () :{
let obsRes: Observable<Response> = this.http.post(url, options);
return obsRes.map((res: Response) => { return res._body;}).catch(err => this.handleError(err, callMethod));
}
myWsService().subscribe(
result => {
var blob = new Blob([result], {
type: 'image/png'
});
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
this.base64data = reader.result;
console.log(this.base64data);
}
},
err => {
// display error
}
);
<img style="width:200px;height:200px;" [src]="base64data" />
The base64data shows something like:
data:image/png;base64,77+9UE5HDQoaCgAAAA1JSERSAAADIAAAAlgIBgAAAO+/vXbvv71wAAAAAXNSR0IA77+977+9HO+/vQAAAARnQU1BAADvv73vv70L77+9YQUAAO+/ve+/vUlEQVR4Xu+/vQV4Vlfvv73vv73fj++/vTNnXGpTd3d377+9GnXvv73vv73vv73vv70777+977+977+977+9Bg8ECO+/vUBCQgxi77+977+9BALvv71d77+9Mu+/ve+/vTPvv71/77+977+9We+/vduQ0rTvv73OtDPvv73vv717PV1b77+9Xlvvv73vv73vv73vv71dYn7vv73vv73vv70nP++/ve+/
The converted data doesn’t look right and I think something must be wrong. I am doing my tests via the browser or phone.
Any ideas please?
EDIT 1 :
My response is correct, with fiddler i checked the binary content. But in ionic, my blob is corrupted. I don’t have good binaries datas. Some characters are replaced by ’ '� '. At left the original file, at right the file received by ionic.
I don’t understand why.