CODEWITHSUNDEEP
angularionic-frameworkionic4capacitor
Lucas Leandro
Lucas Leandro

Reputation: 308

How to display base64 image on iPhone in Ionic 4

I am using Capacitor Plugins to get the image file (from camera or gallery). PC and Android are working fine, but the code crashes on iPhone.

It opens the galery, I grab the image and it crashes when trying to display

I checked the permissions and they are all set. Why would it crash only on ios? Is it a problem with the string? Security?

HTML:

< ion-img role="button" class="image" [src]="selectedImage" *ngIf="selectedImage" >

TS CODE:

Plugins.Camera.getPhoto({
    quality: 100,
    source: CameraSource.Prompt,
    correctOrientation: true,
    allowEditing: false,
    resultType: CameraResultType.Base64
})
 .then(image => {
      this.selectedImage = image.base64Data; // VAR TO DISPLAY IN HTML
  })

Error log

enter image description here

Edit: Now Im using DomSanitizer and SafeResourceUrl to variable. The error stopped, but the image wont display though

Upvotes: 1

Views: 9850

Answers (5)

Stephen Romero
Stephen Romero

Reputation: 3022

I had the same issue, but changing the dimensions of the photo in camera options did the trick for me. I was using Cordova, but I'll try my best to convert to capacitor.

Cordova:

const options: CameraOptions = {
      quality: 75,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      saveToPhotoAlbum: true,
      correctOrientation: true,
      targetHeight: 1024,
      targetWidth: 768
    }

Capacitor:

const image = await Camera.getPhoto({ 
       quality: 75,//Test
       source: CameraSource.Prompt,
       correctOrientation: true,
       allowEditing: false,
       resultType: CameraResultType.Base64
       height : 1024,//Test
       width : 768//Test
    }

Capacitor Docs here.

Upvotes: 1

V. Pivet
V. Pivet

Reputation: 1328

HTML : 

<img class="ox-picture" [src]="display(b64)"/>

TS : 

constructor(public dms: DomSanitizer) {}

display(b64: string) {
  return this.dms.bypassSecurityTrustUrl("data:image/jpeg;base64," + b64);
}

Upvotes: 2

Khurshid Ansari
Khurshid Ansari

Reputation: 5075

From official documentation :

Component: 

public getImage(){
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 (DATA_URL):
 let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
 // Handle error
});
}

Html

<img src={base64Image} />

Upvotes: 0

jcesarmobile
jcesarmobile

Reputation: 53301

As you want to display the image and not use the base64 data, then use DataUrl resultType.

For your code sample it should be

Plugins.Camera.getPhoto({
    quality: 100,
    source: CameraSource.Prompt,
    correctOrientation: true,
    allowEditing: false,
    resultType: CameraResultType.DataUrl
})
 .then(image => {
      this.selectedImage = image.dataUrl; // VAR TO DISPLAY IN HTML
 })

But also, as you are using Angular it's recommended to sanitize the data, it should be something like this:

this.selectedImage = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));

Check a full ionic angular example here https://capacitor.ionicframework.com/docs/guides/ionic-framework-app

Upvotes: 2

Kabir
Kabir

Reputation: 1479

Change this line 

this.selectedImage = "data:image/jpeg;base64, " + image.base64Data;

Upvotes: 5

Related Questions