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)