matheusdavidson
commented
1 year ago Hi there, can you please post the entire html and ts file, properly formatted so I can debug.
It looks like you didn't load the ViewChild("angularCropper") the right way, did you add #angularCropper to the component in the view?
<button class="btn btn-primary" (click)="openImageModal(imageModal)">Launch demo modal
<ng-template #imageModal let-modal>
Modal title
Cropped Image:
typescript
@ViewChild('angularCropper') public angularCropper: CropperComponent;
imageUrl: any = 'assets/images/others/placeholder.jpg'; resultImage: any;
// Plugin configuration config = { zoomable: false };
handleFileInput(event: any) { if (event.target.files.length) { var fileTypes = ['jpg', 'jpeg', 'png']; //acceptable file types var extension = event.target.files[0].name.split('.').pop().toLowerCase(), //file extension from input file isSuccess = fileTypes.indexOf(extension) > -1; //is extension in acceptable types if (isSuccess) { //yes // start file reader const reader = new FileReader(); const angularCropper = this.angularCropper; reader.onload = (event) => { if (event.target?.result) { angularCropper.imageUrl = event.target.result; // this.imageUrl = event.target.result; } }; reader.readAsDataURL(event.target.files[0]); } else { //no alert('Selected file is not an image. Please select an image file.') } } }
cropImage() { console.log('clicked', this.angularCropper.cropper.getCroppedCanvas().toDataURL()); const resultImage = this.angularCropper.cropper.getCroppedCanvas().toDataURL(); console.log('clicked', this.resultImage); this.imageUrl = this.angularCropper.cropper.getCroppedCanvas().toDataURL(); let dwn: HTMLElement = document.querySelector('.download') as HTMLElement; dwn.setAttribute('href', this.angularCropper.cropper.getCroppedCanvas().toDataURL()); }