Using Camera Native, picture isn't displayed

Ionic Framework ionic-v3
1

There is my code, when I take a picture, I click on OK but nothing happens…

I tried with [src]=… & src=… but also with {{ base64Image }} on both.
I tried with FILE_URI & DATA_URL and it changes nothing

Thanks in advance for your time & help ! :blush:

import { Component} from '@angular/core';
import { Camera } from 'ionic-native';

    @Component({
      template: `
      <ion-content>Profile
          <ion-card>
            <ion-card-content>
              <img src="base64Image" *ngIf="base64Image"/>
            </ion-card-content>
          </ion-card>
          <ion-card>
            <ion-card-content>
              <img [src]="base64Image" *ngIf="base64Image" />
            </ion-card-content>
          </ion-card>
      </ion-content>
      `
    })

    export class Profile {
      constructor() {
        
      }
      public base64Image: string;

      takePicture(){
        Camera.getPicture({
            destinationType: Camera.DestinationType.FILE_URI,
            targetWidth: 1000,
            targetHeight: 1000
        }).then((imageData) => {
          // imageData is a base64 encoded string
            this.base64Image = "data:image/jpeg;base64," + imageData;
        }, (err) => {
            alert(err);
        });
      }
    }
3 Likes
2

Try

destinationType: Camera.DestinationType.DATA_URL

and jpg (instead of jpeg)

this.base64Image = "data:image/jpg;base64," + imageData;

That works for me.

2 Likes
3

Thanks for the answer, but it doesn’t work for me :confused:, my ion-card-content are still blank…
It looks like it doesn’t know where to find the picture display it. Another question, when you take the picture, where is it temporarily kept ?

4

And if you remove the *ngIf from your view?

My HTML looks like this

<div class="avatar-wrapper">
  <img [src]="userAvatar" alt="Avatar" class="avatar">
</div>
5

Looks better but this is not the expected result :no_mouth:
There is the screenshot :

image
Ionic2 CameraNative.png1419×2459 139 KB

6

Hi ,
I have the same problem. This problem occur in iOS only. App runs fine Android.
I found workaround solution like this:

In .ts file

takePicture(){
    let options = {
      destinationType: Camera.DestinationType.DATA_URL,
      targetWidth: 500,
      targetHeight: 500,
      quality: 100,
      allowEdit: true,
      correctOrientation: false,
      saveToPhotoAlbum: true,
      // mediaType: 0
    };
    Camera.getPicture(options)
    .then((imageData)=>{
      this.base64Image = "data:image/jpeg;base64," + imageData;

      let cameraImageSelector = document.getElementById('camera-image');
      cameraImageSelector.setAttribute('src', this.base64Image);

    })
    .catch(err=>{
      console.log(err);
    })
 }

In .html file:

<ion-content padding>
      <img id="camera-image" />
     
      <ion-fab bottom right>
        <button ion-fab color="secondary" (click)="takePicture()"><ion-icon name="camera"></ion-icon></button>
      </ion-fab>
    </ion-content>

Here is my code in github:

3 Likes
7

Nevermind, I misread your post…

8

Okay well, working now thanks a lot !
I’ll put : saveToPhotoAlbum: false because I want to put a filter on the picture before saving it :wink:

You saved me mate :+1:

and just saying that I’m not on iOS but on android 5.0

1 Like
9

Thanks for your contributing! I resolved my problem with ios…

10

it works for me in android :slight_smile:

1 Like
11

muchas gracias por la respuesta!!!