title: How to convert base64 string to JPG or Png in Ionic
body: <p>I am working in my Ionic App and I am performing the update profile image using the file input in Ionic.</p>
  
  <p>This is my <strong>updateimage.html</strong>:</p>
  
  <pre><code>&lt;ion-content padding style="text-align: center;"&gt;
    &lt;ion-grid align-items-center justify-content-center style="height: 100%;"&gt;
      &lt;ion-row align-items-center justify-content-center style="height: 100%;"&gt;
        &lt;ion-col align-self-center justify-content-center col-12 col-md-6 col-xl-3 style="text-align: center;"&gt;
          &lt;h2 class="myformh2"&gt;Update Profile Picture&lt;/h2&gt;
          &lt;h4 class="myformh2"&gt;Image Preview&lt;/h4&gt;
          &lt;img src="{{imageUrl}}" class="newimg22" /&gt;
          &lt;form [formGroup]="updateprofileimg" (ngSubmit)="changeProfileImage()"&gt;
            &lt;ion-list&gt;
              &lt;ion-item class="newitem2"&gt;
                &lt;ion-input placeholder="Upload Image" type="file" (change)="onImageSelected($event)"
                  [(ngModel)]="img_upload" formControlName="img_upload" required&gt;&lt;/ion-input&gt;
              &lt;/ion-item&gt;
              &lt;div&gt;
                &lt;button [disabled]="!updateprofileimg.valid" ion-button type="submit" class="newbtn11" color="primary"
                  block&gt;Change Profile Picture&lt;/button&gt;
              &lt;/div&gt;
            &lt;/ion-list&gt;
          &lt;/form&gt;
        &lt;/ion-col&gt;
      &lt;/ion-row&gt;
    &lt;/ion-grid&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>In this html, when the user upload the image, I am showing the preview of the image.</p>
  
  <p>This is my <strong>updateimage.ts</strong>:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { IonicPage, NavController, NavParams } from 'ionic-angular';
  import { Validators, FormBuilder, FormGroup } from '@angular/forms';
  import { RestapiProvider } from '../../providers/restapi/restapi';
  import { Storage } from '@ionic/storage';
  
  @IonicPage()
  @Component({
    selector: 'page-updateimage',
    templateUrl: 'updateimage.html',
  })
  export class UpdateimagePage {
    updateprofileimg : FormGroup;
    img_upload: any = [];
    selectedImage;
    imageUrl;
    converted_image;
    responseEdit: any;
    constructor(public navCtrl: NavController, public navParams: NavParams,
      private formBuilder: FormBuilder, public restProvider: RestapiProvider,
      private storage: Storage) {
        this.updateprofileimg = this.formBuilder.group({
          img_upload: ['', Validators.required],
        });
    }
  
    ionViewDidLoad() {
      console.log('ionViewDidLoad UpdateimagePage');
    }
  
    onImageSelected(event) {
      this.selectedImage = event.target.files[0];
      let reader = new FileReader();
  
      reader.onload = (e: any) =&gt; {
        this.imageUrl = e.target.result;
        this.converted_image = "data:image/jpeg;base64,"+this.imageUrl;
      };
      reader.readAsDataURL(this.selectedImage);
    }
  
    changeProfileImage()
    {
      const fd = new FormData();
      this.storage.get("ID").then((val) =&gt;
      {
        if(val)
        { 
          fd.append('upic', this.selectedImage, this.selectedImage.name);
          this.restProvider.updateprofileimg(fd , 'update_profilepic/'+val).subscribe((data) =&gt; {
            if (data) {
              this.responseEdit = data;
              console.log(this.responseEdit.msg);
            }
          });
  
        }
      });
    }
  
  }
  </code></pre>
  
  <p>In this ts file, I am sending the uploaded image to the backend using API but the problem is that, It is sending the base64 url of the image.</p>
  
  <p>Any help is much appreciated.</p>