PrimeFaces ImageCropper 显示裁剪区域尺寸

Question

我正在开发一个 jsf 应用程序以使用 PrimeFaces 6.2 ImageCropper 裁剪图像。我想将裁剪区域的尺寸（例如 500 x 500 像素）显示为图像下方的文本字段，并在用户拖动区域边缘时适当更新文本字段尺寸。

我实现此目的的方法是首先创建字段，以维护 cropBean 中裁剪区域尺寸的值。然后在ImageCropper中添加一个valueChangeListener标签，触发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();
}

（我还为字段添加了 getter 和 setter 并验证了裁剪工作）

但是 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 失败的风险，并且可能需要维护：

只需在 p:imageCropper 下方的某处添加（并理解）此 JavaScript 并注意我已将 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>

PrimeFaces ImageCropper 显示裁剪区域尺寸

PrimeFaces ImageCropper display crop region dimensions

jsf

primefaces