Блог

Главная - Вопросы по программированию - ngx-обрезка: установите начальный размер и положение области обрезки

ngx-обрезка: установите начальный размер и положение области обрезки

#angular #ngx-image-cropper

Вопрос:

Я искал и не могу найти решение, которое я ищу, с помощью ngx-обрезчика. Мне бы хотелось, чтобы область обрезки была в верхнем левом углу, когда я ее открываю, и примерно 1/6 размера изображения, как это:

введите описание изображения здесь

Я получил это, используя статическую ширину и высоту:

 <image-cropper
[imageChangedEvent]="imageChangedEvent"
[maintainAspectRatio]="false"
[cropperStaticHeight]= "100"
[cropperStaticWidth]= "125"
[resizeToWidth]="0"
format="png"
(imageCropped)="imageCropped($event)"
(imageLoaded)="imageLoaded()"
(cropperReady)="cropperReady()"
(loadImageFailed)="loadImageFailed()"
 ></image-cropper>

Однако я также хотел бы иметь возможность настроить его так, чтобы он мог увеличиваться или уменьшаться в размере.

Я думал, что это сработало бы (установка начального положения), но это не сработало :

кроппер Чтобы иметь возможность перезаписать координаты кроппера, вы можете использовать этот ввод. Создайте новый объект типа CropperPosition и назначьте его этому входу. Обязательно создавайте новый объект каждый раз, когда вы хотите перезаписать позицию обрезки, и ждите, пока сработает событие cropperReady.

 cropperPosition: CropperPosition = {
x1: 0,
y1: 0,
x2: 125,
y2: 100
};

Кто-нибудь знает, как я могу этого добиться?

Комментарии:

1. Есть ли замечание о том, как привязать вновь созданную позицию обрезки к шаблону? Кроме того, можно ли установить «cropperStaticHeight» и «cropperStaticWidth» с помощью переменных? Если да, то вы можете рассчитать, что он составляет 1/6 размера

2. @gerstams То, что я включил в раздел обрезки, — это все, что было в документации. Я могу установить «Высоту обрезки» и «Ширину обрезки» без каких-либо проблем, за исключением того, что вы не можете увеличить площадь обрезки. Мне нужно иметь небольшую стартовую позицию, но также возможность при необходимости увеличить область обрезки ( я использую in в качестве функции масштабирования, так как она лучше всего подходит для того, что мне нужно в Angular. Доступная информация о масштабировании не соответствует требованиям)

3. Можете ли вы использовать меньшую ширину и меньшую высоту вместо статики? Я только сейчас понял, почему это называется статикой, извините. Я нашел минимальные значения здесь: npmjs.com/package/ngx-image-cropper

Ответ №1:

Нашел решение здесь: https://github.com/Mawi137/ngx-image-cropper/issues/115

 imageLoaded() {
    setTimeout(() => {
        this.cropper = {x1.... };
    }, 2);
}

В конце также есть примечание, в котором говорится, что оно работает с «ngx-обрезкой изображений»: «0.1.21», но не с последними версиями
Я обнаружил, что если я верну его на 0.1.21 и попробую, это сработает. После того, как я сбросил на последнюю версию, и она тоже работала нормально.

Метки: