Description
<button class="btn btn-primary" (click)="openImageModal(imageModal)">Launch demo modal
<ng-template #imageModal let-modal>
Modal title
</div>
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div class="d-flex align-items-center flex-wrapp me-2 mt-3">
<button class="btn btn-primary crop mb-2 mb-md-0" (click)="cropImage()">Crop me</button>
</div>
<div class="mb-4 mb-md-0 mt-3">
<a href="" class="btn btn-outline-primary download" download="imageName.png">Download croped image</a>
</div>
</div>
</div>
<div class="col-md-12 ms-auto">
<h6 class="text-muted mb-3">Cropped Image: </h6>
<img class="w-100 cropped-img mt-2" src="{{resultImage}}" alt="">
</div>
</div>
</div>
</div>
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());
}