Page Components JavaScript DHTML





  
  
  Min (single axis) dimensions test
    
   
  
  
  
  
    
    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;
    }
    
    // example with minimum dimensions
    Event.observe( 
      window, 
      'load', 
      function() { 
        new Cropper.Img( 
          'testImage', 
          { 
            minWidth: 200, 
            displayOnInit: true, 
            onEndCrop: onEndCrop 
          } 
        ) 
      } 
    );
    
    /*
    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;
    }
    
    #testWrap {
      margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
    }
  

  
  

Minimum (single axis) dimension test


  


    Test of applying a minimum dimension to only one axis (width in this case) to the cropper
  


  
  
  
  
    
  

  
  
  


    x1:
    
  


  


    y1:
    
  


  


    x2:
    
  


  


    y2:
    
  


  


    width:
    
  


  


    height
    
  

  
  


           
       
jsCropperUI-1.2.0.zip( 189 k)