crash on sharing image in ionic 3

Question

I have tried with camera plugin with my ionic app its work successfully. While i trying to share with social sharing it crashes and closed. Please find the code to rectify my error.

Note: If camera picture is not exceed in that base64image the share is working perfectly. If the picture exist its crashes so I think mistake may be related to that base64image I am not able to point the mistake let me help.

home.ts file

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { SocialSharing } from '@ionic-native/social-sharing';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public base64Image: string;
  
  constructor(public navCtrl: NavController, private camera: Camera, private socialSharing:SocialSharing) {

  }
opencamera()
{
  const options: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.DATA_URL,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE
  }
  
  this.camera.getPicture(options).then((imageData) => {
   // imageData is either a base64 encoded string or a file URI
   // If it's base64:
    this.base64Image = 'data:image/jpeg;base64,' + imageData;
  }, (err) => {
   // Handle error
  });
  
  console.log('clicked camera button');


}
sharing()
{
  this.socialSharing.canShareViaEmail().then(() => {
    // Sharing via email is possible
    console.log('sharing is successfull');
  }).catch(() => {
    // Sharing via email is not possible
  });
  
  // Share via email
  this.socialSharing.shareViaWhatsAppToReceiver('98947XXXXX', 'checking sample', 'this.base64Image', null)
  .then(() => {
    // Success!
    console.log('shared');
  }).catch(() => {
    // Error!
  });
}

}

home.html file

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button icon-only (click)=opencamera() >
    <ion-icon name="camera">camera</ion-icon>
  </button>
  Latest Picture:
  <img [src]="base64Image" *ngIf="base64Image" />
  <button ion-button round (click)=sharing()>share</button>
  <button ion-button secondary menuToggle>Toggle Menu</button>
</ion-content>

---

Answer 1

Just like you can see in the docs:

DATA_URL can be very memory intensive and cause app crashes or out of memory errors. Use FILE_URI or NATIVE_URI if possible

This is part of the code I usually use for taking and sharing pictures. The sharing part is not exactly like yours, but you can modify it then to adapt it to your requirements.

Component

// Angular
import { Component, NgZone } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

// Ionic
import { Platform } from 'ionic-angular';

// Cordova plugins
import { Camera, CameraOptions } from '@ionic-native/camera';
import { SocialSharing } from '@ionic-native/social-sharing';

@Component({ 
    selector: 'page-share', 
    templateUrl: 'share.html' 
})
export class SharePage {

    public imageUrl: string;
    public imageUrlToShare: string;

    constructor(private platform: Platform,
                private ngZone: NgZone,
                private domSanitizer: DomSanitizer,
                private camera: Camera,
                private socialSharing: SocialSharing) {}

    public onTakePictureClick(): void {
        const options: CameraOptions = {
            quality: 100,
            destinationType: this.camera.DestinationType.FILE_URI, // <-- User FILE_URI to prevent the memory error :)
            correctOrientation: true,
            encodingType: this.camera.EncodingType.JPEG,
            mediaType: this.camera.MediaType.PICTURE
        }

        // Use the plugin to get the photo from the camera
        this.getPhotoWithOptions(options);
    }

    private getPhotoWithOptions(options: CameraOptions): void {
        this.camera.getPicture(options).then((imageData) => {
            this.getPhotoUrl(imageData);
        }, (err) => {
            // Handle the error!!
            console.log(err);
        });
    }

    private getPhotoUrl(uri: string): void {
        if (!uri) { return; }

        // iOS fix for getting the proper url
        uri = this.platform.is('ios') && uri.indexOf('file://') < 0 ? `file://${uri}` : uri;

        (<any>window).resolveLocalFileSystemURL(uri, entry => {
            this.ngZone.run(() => {

                // Use this property to show the image on the view
                this.imageUrl = entry.toInternalURL();

                // Use this property to share the image using the SocialSharing plugin
                this.imageUrlToShare = entry.toURL();

            });
        });
    }

    public onShareClick(): void {
        const options = {
            message: null, // not supported on some apps (Facebook, Instagram)
            subject: null, // fi. for email
            files: [this.imageUrlToShare] // an array of filenames either locally or remotely
        };

        this.socialSharing.shareWithOptions(options)
            .catch(error => {
                // Handle the error!!
                console.log(err);
            })

    }

    public getTrustResourceUrl(url: string) {
        return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

View

<ion-header>
    <ion-navbar color="primary">
        <ion-title>Share</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>

    <div *ngIf="imageUrl" class="image-container">
        <img class="image" [src]="getTrustResourceUrl(imageUrl)" alt="Picture">
    </div>

    <button (click)="onTakePictureClick()" ion-button block icon-left>
        <ion-icon name="camera"></ion-icon>Take picture
    </button>

    <button *ngIf="imageUrl" (click)="onShareClick()" ion-button block icon-left>
        <ion-icon name="share-alt"></ion-icon>Share
    </button>

</ion-content>