How to post and bind images that coming as BASE64 string

Question

I want to send uploaded files to base64 so that I can pass to the request(I am using Remote API's). The problem is that I'm using Angular 2 with Typescript and I couldn't find any info on how to do that. I found that in Javascript it can be done with canvas .I have created a javascript function to convert the image to base64 and get file using

//insted of ng-Model in the case of file upload

var ImgeData = event.srcElement.files;

console.log(ImgeData);

so my index. html contains

<script type='text/javascript'> function encodeImageFileAsURL()

{ // logic for convert to BASE64 //ng-Model file

var ImgeData = event.srcElement.files;

console.log(ImgeData);

} </script>

html will be like

<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL(); " />

here after selecting the image i am getting the file name and details in

var ImgeData = event.srcElement.files;

the real confusion coming here after in "ImageData" ive the image(file) details.How can send it along with other json data?

my save methode is something like

//in Service.ts

SaveDetails(mar: model)

{

let body = JSON.stringify

([ { "Id": 0, "Name": mar.Name,

"Age": mar.Age,

"ImageUrl": mar.ImageUrl,

"ImgeData": "how i can pass that Imagedata in javascriptfunction along with these details??? " "updatedBy": "ADMIN",

"updatedOn": "2017-07-05" } ]);

console.log(body); let headers = new Headers({ 'Content-Type': 'application/json; charset=utf-8' });

let options = new RequestOptions({ headers: headers });

return this._http.post(this.serverurl , body, options) .map(res => <model[]>res.json()) .catch(this.handleError); }

so the file details getting from js function, send it along with this details How can i send?

same as I need to bind the converted base64 images.how can i bind ?

for binding i ve tried

<img src="data:image/gif;base64,{{ m.ImgeData}}">

unfortunatly this s not working.. Help me to find a solution to bind/save the file

Thanks.