Ionic change cropped image to base64 string

Ionic Framework ionic-v3
1

I am using ionic3 native crop image plugin, and it works and have a src image path, but I need to change it to a base64 string for sending it to the server. How to change it, here is my code for crop image, thanks a lot.

    console.log('buttonCamera clicked');
    let cameraOptions = {
      sourceType: this.camera.PictureSourceType.CAMERA,
      destinationType: this.camera.DestinationType.FILE_URI,      
      quality: 100,
      targetWidth: 500,
      targetHeight: 500,
      encodingType: this.camera.EncodingType.JPEG,      
      correctOrientation: true
    }

    this.camera.getPicture(cameraOptions)
    .then(file_uri => {
       this.crop.crop(file_uri, {quality: 100})
       .then(
          newImage => {console.log('new image path is: ' + newImage);
          this.imageSrc = newImage},
          error => console.error('Error cropping image', error)
       );
    },
    err => console.log(err));
2

You need to turn a file (blob) into a dataURL?

3

I think yes, i need to send it as a string with other params to send it to server in one api.

4 
// translate file blob into DataURI
  private getDataURL(file:Blob): Observable<string> {   
    return Observable.create(
      (observer: Observer<string>) => {
                let reader = new FileReader();
                reader.addEventListener("load", event => { observer.next(reader.result); 
                                                           observer.complete()}, 
                                                false);
                reader.readAsDataURL(file);
               }
      );

  }
5

sorry, Aaron, do you have example that how to change a string file path to a base64 string.

6

Have you found a solution?

7

Use file.readAsDataURL of file Ionic Native plugin to convert into base64 check this tutorial for a full working demo

  showCroppedImage(ImagePath){
	this.isLoading = true;
	var copyPath = ImagePath;
	var splitPath = copyPath.split('/');
	var imageName = splitPath[splitPath.length-1];
	var filePath = ImagePath.split(imageName)[0];

	this.file.readAsDataURL(filePath,imageName).then(base64=>{
		this.croppedImagepath = base64;
		this.isLoading = false;
	},error=>{
	  alert('Error in showing image' + error);
	  this.isLoading = false;
	});
  }