Camera preview and cropper.js

takePicture(){


   const pictureOpts: CameraPreviewPictureOptions = {

     width: 480,
     height: 320,
     quality: 50
   }

   return this.cameraPreview.takePicture(pictureOpts).then(imageData => {

 
this.imageElement.nativeElement.src = "data:image/jpg;base64,"+imageData;
this.cropImage();





     }, error => {
       console.log("CAMERA ERROR -> " + JSON.stringify(error));


     });


}

cropImage(){

  this.cropperInstance = new Cropper(this.imageElement.nativeElement, {
         aspectRatio: 4 / 3, // square
         dragMode: 'move',
         modal: true,
         guides: true,
         highlight: false,
         background: false,
         autoCrop: true,
         autoCropArea: 0.9,
         responsive: false,
         zoomable: true,
         movable: true
     });
console.log(this.imageElement.nativeElement)
}
cropDone() {

  let croppedImg = this.cropperInstance.getCroppedCanvas({ width: 500, height: 500}).toDataURL('image/jpeg');

}

When I crop the image . I get the error toDataURL of null

ERROR TypeError: Cannot read property 'toDataURL' of null
    at HomePage.webpackJsonp.246.HomePage.cropDone (main.js:244)
    at Object.eval [as handleEvent] (HomePage.html:18)
    at handleEvent (vendor.js:12273)
    at callWithDebugContext (vendor.js:13565)
    at Object.debugHandleEvent [as handleEvent] (vendor.js:13153)
    at dispatchEvent (vendor.js:9173)
    at vendor.js:9765
    at HTMLButtonElement.<anonymous> (vendor.js:29596)
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (vendor.js:4499)

is null, so you can call a method on it. Find out why.