How to display an image taken from Camera

Ionic Framework ionic-v3
1

Hi guys,
my issue is about showing a picture after taken from camera.

my code to take a picture is the follow:

 takePicture() {

    this.camera.getPicture({
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true,
      allowEdit: true,
      targetHeight: 300,
      targetWidth: 300

    }).then(
      (imagePath) => {

        if (!_.isEmpty(imagePath)) {
         
         this.navCtrl.push(PhotoPage, { "imagePath" : imagePath});
 
        }

      }, (err) => {

          console.log("Error: " , err);
        
      },
  
  );

  }

my PhotoPage code is in photo.ts:

import { Component } from '@angular/core';
import { IonicPage, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-photo',
  templateUrl: 'photo.html',
})

export class PhotoPage {

  private path: string; 
  private comment: string;

  constructor(
    private navParams: NavParams
  ) {

    this.path = this.navParams.get("imagePath");
   
  }
 
}

and the template photo.html is:

... 
<ion-content padding>

  <ion-card>
    <img src="{{ path }}"  />
  </ion-card>

  <ion-textarea placeholder="Comment" floating [(ngModel)]="comment"></ion-textarea>
  
</ion-content>
...

Doing this, the image is not showed :frowning:

If I log the path I have for example the following:

file:///storage/emulated/0/Android/data/it.oandsi.photoshoot.com/cache/1522831151484.jpg

If I use DestinationType.DATA_URL, I got a base64 image and works fine, but I am interested to the path, because I have to use the crop function once get a picture from camera.

Please help me, maybe I do a mistake but I don’t know.

Thanks

2

You face the problem on iOS?

See https://ionicframework.com/docs/wkwebview/ chapter “Rewriting file://”

this.path = normalizeURL(this.path);
3

The problem is on Android, then I will use iOS.

I also used normalizeURL from ‘ionic-angular’, but the path doesn’t change and the problem is still present.

4

Maybe some CORS issue or width/height css not interpreted correctly on Android?

Have you try to debug with the Chrome debugger? See error in the console?

5

Unfortunatelly I don’t have the camera on the PC.

I tried to use again normalizeUrl function but this is the result:

path: file:///storage/emulated/0/Android/data/it.oandsi.photoshoot.com/cache/1522832602500.jpg
normalized path : file:///storage/emulated/0/Android/data/it.oandsi.photoshoot.com/cache/1522832602500.jpg

As you can see the result is the same.

Then I tried to replace file:// to empty string:

(this.navParams.get(“imagePath”)).replace(‘file://’, ‘’);

obtaining the follow:

/storage/emulated/0/Android/data/it.oandsi.photoshoot.com/cache/1522832772093.jpg

This time I see the following:

37
WhatsApp Image 2018-04-04 at 11.08.37.jpeg900×1600 139 KB

Please help me :frowning:

6

Ok so I double checked, the file:// should only be removed on iOS not Android. Using the normalize method should take care of that

Could you try again without replacing manually file:// and publish a screenshot again?

7

About

You could try to test with a real phone and debug it while pairing it with your computer with a cable

Android how to: https://www.youtube.com/watch?v=Y1rD954ZyKA&feature=youtu.be

iOS how to: https://www.youtube.com/watch?v=9J8AxhDxtTE

8

Finally is your project an open source project?

If yes I could give a try, the problem is definitely in your project not in the libraries

9

I am on the real phone… I am using a real device

10

Then you could try to debug like in the video tutorials

11

If I keep the path as is: file:///storage/emulated/0/Android/data/it.oandsi.photoshoot.com/cache/1522832602500.jpg

I don’t see nothing, a part of the label of the Comment:

08
WhatsApp Image 2018-04-04 at 11.23.08.jpeg900×1600 126 KB

12

Nop, is a real project.

I will try to create a blank project with only this part…

13

Ok I am seeing the tutorial.
I let you know!

Thanks for now

1 Like
14

According your last screenshot, I kind of have the feeling that there is a CSP or CSS error because there isn’t any broken image displayed anymore, like in your first screenshot

But I may be wrong

Anyway it’s good to have a look to the tutorial, even if it doesn’t help you now, may help later to know how to debug

15

yes, I let you know. Thanks

16

I see the remote devices on chrome but when I click on the inspect button

1

it open a page without my app… and I am not able to continue

2

17

When you select your image in the elements list, do you find your image? src is set? css width/height set?

<ion-card>
  <img src="{{ path }}"  /> <!--this rendered element in chrome debugger elements-->
</ion-card>
18

And a spontaneous idea, could you try moving the following from your constructor to ionViewDidEnter ?

this.path = this.navParams.get("imagePath");

just in case

19

now my problem is about : I cannot see the device button when I go in the inspect app

As you can see in the image above (2.png). I don’t have the device button like in the youtube tutorial:

3
3.JPG926×518 54.9 KB

20

Don’t know, don’t use that option when I debug

Have you try my last remark about catch the param in ionViewDidEnter instead of the constructor?

Anyway if you don’t succeed, let me know if I could access the sources or a demo repo where you could reproduce your problem. I don’t have that much time and that would be finally quicker for both of us