Я использую библиотеку ngx-image-cropper для обрезки изображений в моем Angular. 8 проект.
Что я хочу сделать, так это:
- Я хочу показать обрезку внутри модального окна при выборе файла.
- В модальном окне есть кнопка обрезки, при нажатии которой изображение будет обрезано (без автообрезки), и кнопка отмены, которую можно использовать для закрытия модального окна без обрезки изображения.
- После того, как изображение будет обрезано, модальное окно будет закрыто, и появится кнопка редактирования, которую можно использовать для повторного кадрирования изображения (при нажатии на кадрирование я по существу обрезаю изображение и скрываю модальное окно. Поэтому при нажатии на редактирование я просто показываю снова скрытый модальный.).
- Если из входных файлов выбран другой файл, модальное окно будет показано с новым изображением. Пользователь может обрезать или отменить. Если он отменен, я хочу сбросить исходное изображение обрезки на предыдущее изображение. Как я могу это сделать?
Я пробовал следующее, но не работает:
lastCropperPosition: CropperPosition;
lastCroppedImage: any;
crop() {
this.imageCropper.crop();
this.lastCropperPosition = this.getCurrentCropperPosition();
this.lastCroppedImage = new ElementRef(
this.imageCropper.sourceImage.nativeElement
);
this.logoModal.hide();
}
cancelCrop() {
if (this.lastCroppedImage) {
this.imageCropper.sourceImage = this.lastCroppedImage;
}
if (this.lastCropperPosition) {
this.imageCropper.cropper = this.getLastCropperPosition();
}
this.logoModal.hide();
}
getCurrentCropperPosition() {
return {
x1: this.imageCropper.cropper.x1,
x2: this.imageCropper.cropper.x2,
y1: this.imageCropper.cropper.y1,
y2: this.imageCropper.cropper.y2
};
}
getLastCropperPosition() {
return {
x1: this.lastCropperPosition.x1,
x2: this.lastCropperPosition.x2,
y1: this.lastCropperPosition.y1,
y2: this.lastCropperPosition.y2
};
}
HTML-код:
<div bsModal #logoModal="bs-modal" class="modal fade" tabindex="-1"
role="dialog" aria-labelledby="logoModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Crop Image</h4>
</div>
<div class="modal-body">
<image-cropper
[imageChangedEvent]="imageChangedEvent"
[maintainAspectRatio]="true"
[aspectRatio]="rules.logo.maxWidth / rules.logo.maxHeight"
[cropperMinWidth]="rules.logo.minWidth"
[resizeToWidth]="rules.logo.maxWidth"
[autoCrop]="false"
onlyScaleDown="true"
outputType="both"
(imageCropped)="imageCropped($event)"
(imageLoaded)="imageLoaded()"
(cropperReady)="cropperReady()"
(loadImageFailed)="loadImageFailed()"></image-cropper>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-secondary"
(click)="cancelCrop()">Cancel</button>
<button type="button" class="btn btn-sm btn-primary"
(click)="crop()">Crop</button>
</div>
</div>
</div>
</div>
Является ли использование свойства sourceImage
правильным способом делать то, что я хочу? Я меняю this.lastCroppedImage
только внутри метода урожая(). Но, похоже, он меняется всякий раз, когда во входном файле выбирается новое изображение. Почему это происходит?
PS: я уже пытался назначить sourceImage
напрямую, не создавая новый ElementRef
. Это тоже не работает.
Пример Stackblitz: https://stackblitz.com/edit/image-cropper-r5pyqh
Шаги для воспроизведения в Stackblitz:
Browse and crop an image.
Browse again and select new image.
Click cancel in the crop window.
Click recrop. Observe that the image in crop window is the second one. Instead I want the first one.