时间戳

首页 > 解决方案 > PrimeFaces ImageCropper 显示裁剪区域尺寸

jsf - PrimeFaces ImageCropper 显示裁剪区域尺寸

问题描述

我正在开发一个 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" />

作物豆部分：

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

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

（我还为田地添加了 getter 和 setter，并验证了裁剪是否有效）

但是valueChangeListener似乎没有调用该updateCropDimensions方法。任何人都知道我要去哪里错或有其他解决方案？

标签： jsfprimefaces

解决方案

为了向用户显示维度，您无需更新服务器端 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>

推荐阅读