Image Cropping in Rich Faces
There are various Image Cropping tools available in JQuery and Java Script. I try to integrate it with rich faces application. I m using YUI for Image cropping. Since other rises conflict issues. I need to capture the coordinates and persist it. I cant get the coordinates value from the jsf page.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %> <%@ taglib prefix="a4j" uri="http://richfaces.org/a4j" %> <%@ taglib prefix="rich" uri="http://richfaces.org/rich" %>
<style type="text/css" media="screen">
#results {
border: 1px solid black;
height: 83px;
width: 125px;
position: relative;
overflow: hidden;
}
#results img {
position: absolute;
top: -20px;
left: -20px;
}
</style>
<script>
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event,
results = null;
Event.onDOMReady(function() {
results = Dom.get('results');
var crop = new YAHOO.widget.ImageCropper('yui_img', {
initialXY: [20, 20],
keyTick: 5,
shiftKeyTick: 50
});
crop.on('moveEvent', function() {
var region = crop.getCropCoords();
results.firstChild.style.top = '-' + region.top + 'px';
results.firstChild.style.left = '-' + region.left + 'px';
results.style.height = region.height + 'px';
results.style.width = region.width + 'px';
Dom.get('t').innerHTML = region.top;
Dom.get('l').innerHTML = region.left;
Dom.get('h').innerHTML = region.height;
Dom.get('w').innerHTML = region.width;
});
});
})();
function getValue()
{
alert("Inside");
//alert(document.getElementById('h').innerHTML)
}
</script>
<rich:modalPanel id="addProductLinksModalPanel" autosized="true"
domElementAttachment="parent"
onshow="javascript:scroll(0, 0);"
rendered="true" width="850" height="300" minWidth="850" minHeight="300" >
<f:facet name="header">
<a4j:outputPanel ajaxRendered="true">
<h:panelGroup>
<h:outputText
value="Add Product Links " />
</h:panelGroup>
</a4j:outputPanel>
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage style="cursor:pointer;border:none;"
id="addProductLinksCreateCloseModalHideImgLink"
value="/skins/images/close.png" />
<rich:componentControl for="addProductLinksModalPanel"
attachTo="addProductLinksCreateCloseModalHideImgLink" operation="hide"
event="onclick" id="addProductLinksModalPanelHide" />
</h:panelGroup>
</f:facet>
<rich:spacer id="addProductLinksCreateCloseEmptySpacer" height="10px" />
<h:form id="addProductLinksCreateForm">
<jsp:include page="/regions/lovInnerTopRegion.jsp" flush="false" />
<table width="100%">
<tr>
<td align="right">
<a4j:commandButton styleClass="btnGreen" value="Add Product"
id="addProductLinksCreateBottomSaveBtn"
action="#{backing_addProductLinksModal.addProduct}"
reRender="cmsSiteViewMainForm"
onclick="disableButtonAndShowLoadingInfoWindow(this.id);"
oncomplete="enableButtonAndHideLoadingInfoWindow(this.id);#{rich:component('addProductLinksModalPanel')}.hide();#{rich:component('productLOVModalPanel')}.show();" />
</td>
</tr>
<body class="yui-skin-sam">
<tr>
<p><img src="/app/css/images/apple.jpg" id="yui_img" height="333" width="345"></p>
<div id="results"><img src="/app/css/images/apple.jpg"></div>
<ul>
<li>Height: (<span id="h">91</span>)</li>
<li>Width: (<span id="w">150</span>)</li>
<li>Top: (<span id="t">20</span>)</li>
<li>Left: (<span id="l">20</span>)</li>
</ul>
<input type="button" onclick="getValue()" value="click"/>
</tr>
</table>
</h:form>
</rich:modalPanel>
I have included the scripts and others in the base page. Let me know any tips to proceed further.
