CODEWITHSUNDEEP
htmltypescriptionic2base64
user6579134
user6579134

Reputation: 839

ionic2 - base64 fails to load after selection from gallery

i'm using the camera plugin which works correctly. The issue i'm facing now is when i select the image from the gallery or use the camera to take a photo, the images fails to display in the view

HTML

 <img *ngIf="base64Image"  [src]="base64Image" width="80" (click)="changePhoto()">

JAVASCRIPT

            let options = {
          quality: 90,
          allowEdit: true,
          targetWidth: 800,
          targetHeight: 800,
          destinationType: this.camera.DestinationType.DATA_URL,
          sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
          encodingType: this.camera.EncodingType.JPEG,
          mediaType: this.camera.MediaType.PICTURE
        };
        this.camera.getPicture(options).then((imageData) => {
          this.base64Image = "data:image/jpeg;base64," + imageData;
          this.hideMainPic='hide';
          //this.preLoaderImage.push(this.base64Image)


          const fileTransfer: FileTransferObject = this.Transfer.create();
          var options1 = {
            fileKey: 'file',
            fileName: 'name.jpg',
            headers: {}
          }
          fileTransfer.upload(imageData, 'http://apps.com/scripts/upload_photo.php', options1)
            .then((data) => {
              console.log(JSON.stringify(data));



            }, (err) => {
              let alert = this.alertCtrl.create({
                title: 'Error!',
                subTitle: 'Sorry, There was an error uploading photo',
                buttons: ['Try Again']
              });
              alert.present();
            });
        });

Upvotes: 0

Views: 26

Answers (1)

Abinesh Joyel
Abinesh Joyel

Reputation: 2093

Need to add destination type to your camera options replace your options by this one

let options = {
  quality: 90,
  allowEdit: true,
  targetWidth: 800,
  targetHeight: 800,
  sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE
};
 this.camera.getPicture(options).then((fileUri) => {
     this.base64Image = fileUri
 })

Upvotes: 1

Related Questions