Ionic 4 - 原生相机插件问题

Question

I have developed an android application using Ionic4. I am facing some issues with Ionic Native Camera plugin. The following is my code. The issues that i am facing is given below. The version if camera plugin i am using is "@ionic-native/camera": "^5.3.0", .

Issues

1. Gallery is not opening
2. Captured image is not returning.
3. Application crashes after taking picture

html

<img [src]="studentImage!==null ? studentImage: 'assets/icon/ic_avatar.png'" class="add-picture" (click)="addImage()">

.ts

 public addImage() {
    this.genericServices.presentActionSheet(this.openGallery, this.openCamera);
  }

private openCamera = () => {
    this.studentImage = this.genericServices.selectPicture('camera');
    console.log('Captured Image:=>' + this.studentImage);
  }
  private openGallery() {
    this.studentImage = this.genericServices.selectPicture('gallery');
  }

service

  public async selectPicture(source) {
    let base64Image = null;
    const cameraOptions: CameraOptions = {
      quality: 75,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.PNG,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType: source === 'camera' ? this.camera.PictureSourceType.CAMERA : this.camera.PictureSourceType.PHOTOLIBRARY,
      correctOrientation: true
    };

    await this.camera.getPicture(cameraOptions).then((imageData) => {
      console.log('Returned Image=>' + base64Image);
      return base64Image = 'data:image/jpeg;base64,' + imageData;
    }).catch(() => {
    });
  }

Answer 1

Hard to say what your problem is. I would probably write the code slightly different, like this:

async selectImage() {

    const actionSheet = await this.actionCtrl.create({
        header: "Select Image source",
        buttons: [{
                text: 'Load from Library',
                handler: () => {
                  this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
                }
            },
            {
                text: 'Use Camera',
                handler: () => {
                    this.takePicture(this.camera.PictureSourceType.CAMERA);
                }
            },
            {
                text: 'Cancel',
                role: 'cancel'
            }
        ]
    });
    await actionSheet.present(); 
    }

And then in the takePicture() method decide what destinationType should be, default is FILE_URI (1).

 takePicture(sourceType: PictureSourceType) {
    var options: CameraOptions = {
        quality: 80,
        sourceType: sourceType,
        saveToPhotoAlbum: false,
        correctOrientation: true,
        destinationType: 1,
        targetWidth: 1240,
        targetHeight: 768,
    };
    this.camera.getPicture(options)
    .then((imageData) => {
      // do something with the imageData, should be able to bind it to a variable and 
      // show it in your html file. You might need to fix file path, 
      // remember to import private win: any = window, and use it like this.

      this.imagePreview = this.win.Ionic.WebView.convertFileSrc(imageData);

    }).catch((err) => {
      console.warn("takePicture Error: " + err);
    });
  }

This should work fine... i just tested it. But as i said, there could be several things wrong with your setup. Hope it helps in one way or another... otherwise create a fiddle, and i will gladly look at the code for you.