4 Replies Latest reply on Dec 13, 2010 4:44 AM by Somasundaram Arunachalam

    Image Cropping in Rich Faces

    Somasundaram Arunachalam Newbie

      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.