在 Java + JSF 2.0 中使用 jCrop 裁剪图片

Question

我有一个加载图片的页面，用户可以对其进行裁剪。问题是，(x1,y1) 和 (x2,y2) 的值是 js，我需要在我的 backBean 上使用它们。我将如何将它传递给我的 BackBean？

<script type="text/javascript">

    $(function(){

        $('#jcroptarget').Jcrop({

        trackDocument: true,

        onChange: showCoords,

        onSelect: showCoords,

        aspectRatio: 1

        });
    });

    function showCoords(c)
    {

        $('#x').val(c.x);

        $('#y').val(c.y);

        $('#x2').val(c.x2);

        $('#y2').val(c.y2);

        $('#w').val(c.w);

        $('#h').val(c.h);

    };

</script>

<div>
    <label>X1 <input type="text" name="x" id="x" size="4" /></label>
    <label>Y1 <input type="text" name="y" id="y" size="4" /></label>
    <label>X2 <input type="text" name="x2" id="x2" size="4" /></label>
    <label>Y2 <input type="text" name="y2" id="y2" size="4" /></label>
    <label>W <input type="text" name="w" id="w" size="4" /></label>
    <label>H <input type="text" name="h" id="h" size="4" /></label>
</div>

Answer 1

如果这些输入与提交给支持 bean 的表单相同，那么您可以从请求参数映射中获取它们：

Map<String, String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
String x = params.get("x");
String y = params.get("y");
String x2 = params.get("x2");
String y2 = params.get("y2");
String w = params.get("w");
String h = params.get("h");

---

或者，您可以将它们声明为托管属性，以便 JSF 在构造请求范围 bean 时设置它们：

@ManagedProperty("#{param.x}")
private Integer x;
@ManagedProperty("#{param.y}")
private Integer y;
@ManagedProperty("#{param.x2}")
private Integer x2;
@ManagedProperty("#{param.y2}")
private Integer y2;
@ManagedProperty("#{param.w}")
private Integer w;
@ManagedProperty("#{param.h}")
private Integer h;

---

或者，您可以将这些输入绑定到 bean 属性，这样您就不需要手动抓取它们或将它们作为托管属性获取：

<label>X1 <h:inputText id="x" value="#{bean.x}" size="4" /></label>
<label>Y1 <h:inputText id="y" value="#{bean.y}" size="4" /></label>
<label>X2 <h:inputText id="x2" value="#{bean.x2}" size="4" /></label>
<label>Y2 <h:inputText id="y2" value="#{bean.y2}" size="4" /></label>
<label>W <h:inputText id="w" value="#{bean.w}" size="4" /></label>
<label>H <h:inputText id="h" value="#{bean.h}" size="4" /></label>

只有这些属性：

private Integer x;
private Integer y;
private Integer x2;
private Integer y2;
private Integer w;
private Integer h;

别忘了修复 jQuery 选择器以添加 <h:form id> 值：

$('#formId\\:x').val(c.x);
$('#formId\\:y').val(c.y);
$('#formId\\:x2').val(c.x2);
$('#formId\\:y2').val(c.y2);
$('#formId\\:w').val(c.w);
$('#formId\\:h').val(c.h);