用jCrop在Java + JSF 2.0中裁剪圖片

Question

我有一個加載圖片的頁面，用戶可以裁剪它。事情是，（x1，y1）和（x2，y2）的值是js，我需要它們在我的背上。我將如何將它傳遞給我的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);