Image Cropping in Rich Faces
somusiva07 Dec 11, 2010 8:20 AMThere 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.