Ext JS Image Crop Utility

You are looking for a Image Crop utility in Ext JS?
A Clientside Image Crop, cropping on the serverside by Ajax call?
Here you find a Ext JS Crop Library written by me for a Project.
You can use the Code as you like, only the URL http://www.thomas-lauria/ has to be in the used Files / Code
Questions? Mail me or write to my blogentry

Simple Example

Code to Simple Example

        var crop = new Ext.ux.ImageCrop({
          initialHeight: 165, 
          initialWidth: 220,
          imageUrl: '../images/hochschule-reutlingen_th.jpg',
          // the cropper can also be quadratic
          //quadratic: true,
          renderTo: 'FOO'
        });
        crop.on('change', function(foo,x) {console.dir(x);});
    

The JS Code is in Ext.ux.ImageCrop.js

Example in a Window

Code to Example Window

        new Ext.Button({
          applyTo: 'crop-test-button',
          text: 'Image Crop Window',
          handler: function() {
            //getting the image URL from whereever you want
            var imageURL = '../images/hochschule-reutlingen_medium.jpg';
            var cw = new Extamples.CropWindow({
              imageUrl: imageURL,
              listeners:{
                save: function(){
                  // handler if a crop was successfull, and the window was closed
                },
                scope: this
              }
            });
            cw.show();
          }
        });
    

Additional JS Code is in Ext.ux.ImageCrop.js, Extamples.CropWindow.ui.js and Extamples.CropWindow.ui.js