I am getting file url from server through http.post request. I need to convert image to base64 string for database storage.
Please let me know how can i convert image url to base64 string in ionic 2
I am getting file url from server through http.post request. I need to convert image to base64 string for database storage.
Please let me know how can i convert image url to base64 string in ionic 2
I’m using this function to do this (it creates a canvas)
convertToDataURLviaCanvas(url, outputFormat){
return new Promise( (resolve, reject) => {
let img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function(){
let canvas = <HTMLCanvasElement> document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
dataURL;
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
//callback(dataURL);
canvas = null;
resolve(dataURL);
};
img.src = url;
});
}
and I call it using:
this.convertToDataURLviaCanvas(someUrl, "image/jpeg")
.then( base64Img => {
//do whatever you need here, with the base64 data
})
By the way, this has nothing to do with Ionic. It’s pure javascript (except for the , needed for TypeScript compiler).
i think the following code as correct way convert your url image
<ion-item *ngIf=“jobs.Signature”>
<ion-icon item-left name="create"></ion-icon>
<h2>Signature</h2>
<img src="data:image/JPEG;base64,{{jobs.Signature}}">
</ion-item>
or
<ion-item *ngIf=“jobs.Photo”>
<ion-icon item-left name="camera"></ion-icon>
<h2>Photo</h2>
<img src="data:image/JPEG;base64,{{jobs.Photo}}">
</ion-item>
ctx.drawImage(this, 0, 0);
in this above line i got an error in “this”
you just have to replace this with img