Open Goutam192002 opened 5 years ago
So I am using this library to crop the picture in a rounded shape.
This is my code HTML:
<img [src]="profile.picture" alt="profile photo"> <img-cropper #cropper [image]="data" [settings]="cropperSettings"></img-cropper> <button class="btn btn-lg organizer-white-button" (click)="AfterCropTrigger()">Save</button>
TypeScript:
@ViewChild('cropper', undefined) cropper: ImageCropperComponent; cropperSettings: CropperSettings; data = {}; ngOnInit() { this.cropperSettings = new CropperSettings(); this.cropperSettings.width = 800; this.cropperSettings.height = 350; this.cropperSettings.croppedWidth = 800; this.cropperSettings.croppedHeight = 350; this.cropperSettings.canvasWidth = 800; this.cropperSettings.canvasHeight = 600; this.cropperSettings.minWidth = 800; this.cropperSettings.minHeight = 350; this.cropperSettings.noFileInput = true; this.cropperSettings.rounded = true; this.data = {}; } AfterCropTrigger() { this.profile.picture = this.data['image']; }
The output
So I am using this library to crop the picture in a rounded shape.
This is my code HTML:
TypeScript:
The output