The issue I'm encountering involves using the native camera with the capacitor camera plugin. After implementation, I am unable to open the page anymore - clicking the button that should route me to that page does nothing. I suspect the error lies within the commented section of the HTML code, but no error is being displayed. The entire app loads successfully when the commented section is removed.
page.html
<ion-content>
<!--
<ion-card>
<img
role="button"
class="image"
(click)="onPickImage"
[src]="selectedImage"
*ngIf="selectedImage"
>
</ion-img>
</ion-card>
-->
<ion-footer>
<ion-button (click)="onPickImage()" *ngIf="!selectedImage" class="buttonPost" expand="full" color="primary">Take Photo</ion-button>
</ion-footer>
page.ts
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Plugins, Capacitor, CameraSource, CameraResultType } from '@capacitor/core';
@Component({
selector: 'app-cam',
templateUrl: './cam.page.html',
styleUrls: ['./cam.page.scss'],
})
//Code for importing the Native Camera function here
export class CamPage implements OnInit {
@Output() imagePick = new EventEmitter<String>();
selectedImage: string;
constructor() { }
onPickImage() {
if (!Capacitor.isPluginAvailable('Camera')) {
return; //return if camera is not available
}
Plugins.Camera.getPhoto({
quality: 50,
source: CameraSource.Prompt,
correctOrientation: true,
height: 320,
width: 200,
resultType: CameraResultType.Base64
}).then(image => {
this.selectedImage = image.base64String;
this.imagePick.emit(image.base64String);
}).catch(error => {
console.log(error);
return false;
})
}
onImagePicked(image: string) {
}
ngOnInit() {
}
}