Page Components JavaScript DHTML





  
  
  Loading & displaying co-ordinates (with ratio) of crop area on attachment test<
    
   
  
  
  
  
    
    // setup the callback function
    function onEndCrop( coords, dimensions ) {
      $( 'x1' ).value = coords.x1;
      $( 'y1' ).value = coords.y1;
      $( 'x2' ).value = coords.x2;
      $( 'y2' ).value = coords.y2;
      $( 'width' ).value = dimensions.width;
      $( 'height' ).value = dimensions.height;
    }
    
    // basic example
    Event.observe( 
      window, 
      'load', 
      function() { 
        new Cropper.Img( 
          'testImage',
          {
            onEndCrop: onEndCrop,
            displayOnInit: true,
            onloadCoords: { x1: 10, y1: 10, x2: 210, y2: 110 },
            ratioDim: { x: 200, y: 100 }
          }
        ) 
      }
    );     
    
    
    if( typeof(dump) != 'function' ) {
      Debug.init(true, '/');
      
      function dump( msg ) {
        Debug.raise( msg );
      };
    } else dump( '---------------------------------------\n' );
    
    
  
  
  
    label { 
      clear: left;
      margin-left: 50px;
      float: left;
      width: 5em;
    }
    
    html, body { 
      margin: 0;
    }
    
    #testWrap {
      margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
    }
  


  

Loading & displaying co-ordinates (with ratio) of crop area on attachment test


  


    Some test content before the image
  


  
  
    
  

  
  
  


    x1:
    
  


  


    y1:
    
  


  


    x2:
    
  


  


    y2:
    
  


  


    width:
    
  


  


    height
    
  

  
  


           
       
jsCropperUI-1.2.0.zip( 189 k)