_co.onImagePicked 不是函数错误

Question

I'm using a component that delivers the camera ui and camera functionality. The actual component is working because I get the view and I also can choose a picture and display it. But when it comes to the funtion that I want call with a own listenable event. I get this error

_co.onImagePicked is not a function

This function is onImagePicked and I created a output to call it with (imagePick)

 @Output() imagePick = new EventEmitter<string | File>();
...
 onImagePicked(imageData: string | File) {
 ...
  }

I have no idea why since all my other functions are working of this component.

photo-maker.component.ts

   ...
      @ViewChild('filePicker') filePickerRef: ElementRef<HTMLInputElement>;
      @Output() imagePick = new EventEmitter<string | File>();
      selectedImage: string;
      usePicker = false;

      constructor(private sanitizer: DomSanitizer, private router: Router, private plt: Platform,
                  private storage: Storage, private alertCtrl: AlertController) { }


      goCamFi() {
        this.router.navigateByUrl('/camfilter');
      }

      takePicture() {
        if (this.usePicker) {
          this.filePickerRef.nativeElement.click();
        }
        Plugins.Camera.getPhoto({
          quality: 80,
          source: CameraSource.Prompt,
          correctOrientation: true,
          saveToGallery: true,
          allowEditing: true,
          resultType: CameraResultType.Base64,
          direction: CameraDirection.Front
        }).then(image => {
          this.selectedImage = image.base64String;
          this.imagePick.emit(image.base64String);
        }).catch(error => {
          console.log(error);
          return false;
        });
      }

      onImagePicked(imageData: string | File) {
        let imageFile;
        if (typeof imageData === 'string') {
          try {
          imageFile = base64toBlob(imageData.replace('data:image/jpeg;base64,', ''), 'image/jpeg');
          this.storage.set('image_data', imageFile);
          console.log('stored');
          } catch (error) {
            console.log(error);
          }
        } else {
          imageFile = imageData;
        }
      }

      onFileChosen(event: Event) {
        const pickedFile = (event.target as HTMLInputElement).files[0];
        const fr = new FileReader();
        fr.onload = () => {
          const dataUrl = fr.result.toString();
          this.selectedImage = dataUrl;
          this.imagePick.emit(pickedFile);
        };
        fr.readAsDataURL(pickedFile);
      }

photo.page.html (where I make user of the comp.)

<app-make-photo (imagePick)="onImagePicked($event)"></app-make-photo>
</ion-content>

Answer 1

Save it once again and try it will work. Your logic is right only.

check your package.json file, if the version of capacitor is 1 or higher, to display the image, you have to append 'data:image/jpeg;base64,'

see the below code:

onPickImage() {
    if(!Capacitor.isPluginAvailable('Camera')) {
      this.filePickerRef.nativeElement.click();
      return;
    }
    Plugins.Camera.getPhoto({
      quality: 50,
      source: CameraSource.Prompt,
      correctOrientation: true,
      height: 640,
      width: 640,
      resultType: CameraResultType.Base64
    }).then(image => {
      this.selectedImage = 'data:image/jpeg;base64,' + image.base64String;
      this.imagePick.emit(image.base64String);
    })