PrimeFaces ImageCropper отображает размеры области обрезки

Question

Я работаю над приложением jsf для обрезки изображений с помощью PrimeFaces 6.2 ImageCropper.Я хотел бы отобразить размеры области обрезки (например, 500 x 500 пикселей) в виде текстового поля под изображением, и чтобы размеры текстового поля обновлялись соответствующим образом, когда пользователь перетаскивает края области.

Мой подход к достижению этого состоял в том, чтобы сначала создать поля, которые поддерживают значения измерений области обрезки в cropBean.Затем добавьте тег valueChangeListener в ImageCropper, чтобы вызвать метод в cropBean для обновления измерений области обрезки.Вот небольшая часть кода, который я использую:

Часть XHTML:

<p:imageCropper value="#{cropBean.croppedImage}"
                    image="myImage.jpg"
                    initialCoords="0,0,#{cropBean.originalWidth}, #{cropBean.originalHeight}"
                    update=":mainContainer newDimensions"
                    valueChangeListener="#{cropBean.updateCropDimensions}" />

<h:outputText id="newDimensions"
                value="New Dimensions: #{cropBean.cropWidth} x #{cropBean.cropHeight}"
                style="font-style: italic" />

Часть CropBean:

private CroppedImage croppedImage;
private int cropWidth = 0;
private int cropHeight = 0;

public void updateCropDimensions() {
        cropWidth = croppedImage.getWidth();
        cropHeight = croppedImage.getHeight();
}

(я также добавил геттеры иустановщики для полей и проверили, что обрезка работает)

Однако valueChangeListener, похоже, не вызывает метод updateCropDimensions.Кто-нибудь знает, где я иду не так, или есть другое решение?

Answer 1

Чтобы показать размеры пользователю, вам не нужно обновлять свойства bean-компонента на стороне сервера cropWith и cropHeight.Вы можете удалить valueChangeListener и сразу отобразить croppedImage свойства width и height:

<h:form id="frm1">
    <p:imageCropper id="imageCropper" value="#{cropBean.croppedImage}"
         image="myImage.jpg" widgetVar="cropper"
         initialCoords="0,0,#{cropBean.originalWidth}, #{cropBean.originalHeight}"
         update=":mainContainer newDimensions"
         valueChangeListener="#{cropBean.updateCropDimensions}" />

    <h:outputText id="newDimensions"
         value="New Dimensions: #{cropBean.croppedImage.width} x #{cropBean.croppedImage.height}"
         style="font-style: italic" />
    <p:commandButton value="submit" update="dimensions" />
</h:form>

Это обновит отображение размеров при каждой отправке.Если вы дополнительно хотите отобразить текущее выбранное измерение, пока пользователь редактирует свой выбор, вы не можете сделать это через AJAX, потому что p:imageCropper не является компонентом с поддержкой AJAX.Кроме того, при каждом взаимодействии с пользователем создание большого экземпляра CroppedImage будет сопряжено с большими затратами.

Вместо этого вы можете сделать это с помощью JavaScript и переопределить внутренний метод виджета p:imageCropper.Это, конечно, создает риск сбоя в будущих версиях PrimeFaces и может потребовать обслуживания:

Просто добавьте (и поймите) этот JavaScript где-то ниже p:imageCropper и обратите внимание, что я добавил id иwidgetVar атрибут вашего p:imageCropper:

<h:outputScript>

// tweak the image cropper as soon as the image has been loaded
$(PrimeFaces.escapeClientId('frm1:imageCropper_image')).on('load',
    function() {
        var cropper = PF('cropper');

        // backup original saveCoords function
        cropper.saveCoordsOrig = cropper.saveCoords;

        cropper.saveCoords = function(box) {
            // invoke original function
            this.saveCoordsOrig(box);

            // update the dimension display:    
            $(PrimeFaces.escapeClientId('frm1:newDimensions')).html(box.w + ' x ' + box.h);
        }
});
</h:outputScript>