Image Crop Utility

[quixit]

Hey there,
on http://www.thomas-lauria.de/extamples/image_crop.html you will find a Image Crop Utility written with Ext JS.
The Utility calculates only the crop coordinates and measures. This data can be send to the server, where you have to implement the image crop itself.

For example in PHP:

$t = new Imagick($imagepath);
 $t->cropImage($crop['width'], $crop['height'], $crop['x'], $crop['y']);
$t->writeImage($imagepath); 

I hope someone will consider this cropper for useful

greetings
Thomas

[moegal]

your url seems to be missing something. Like .com, .net, etc.

[quixit]

Oops, that should be
http://www.thomas-lauria.de/extamples/image_crop.html

[moegal]

Thanks

Very nice.

What I would find helpful would be if grabbing the corner kept the image ratio while grabbing from the sides or top/bottom would allow that ratio to be broken.

Thanks, Marty

[quixit]

Yes thats right, a good idea.
As relying on Ext.Resizable, i am going to investigate the possiblities of this Class.

greetings.

[iklotzko]

Does this support Ext 3.x ?

[quixit]

Hey iklotzko,
of course. In my Example I am using 3.2.1. In a project I use the actual 3.3 Version with the cropper.

greetings

[iklotzko]

Quixit,

Thanks! I am probably doing something wrong. Here is my example. It looks as though the resizer handles (the blue guys) aren't showing up. Everything else seems to look good. The code is a bit funny with the fetch method, but, that all works great, it's just the resize handles that don't show. But, the image does resize. Do you think it's something with the z-index? I'm using 3.1

The panel below is being added to the center region of a Window using Border Layout.

new Ext.Panel({
                id: 'imageEditorPreview',
                currentImageCropper: null,
                border: false,
                region: 'center',
                autoScroll: true,
                bodyStyle: 'background-color: white;',
                fetchImage: function() {
                    var imgLoad = new Image();
                    var me = this;
                    var imageSrc = 'webportal?action=GetDashboardImage&dashboardID=' + dashboardID + '&cetovaID=' + cetovaID + '&random=' + Math.random();
                    imgLoad.onload = function() {
                        var crop = new Ext.ux.ImageCrop({
                            imageUrl: imageSrc,
                            initialWidth: imgLoad.width,
                            initialHeight: imgLoad.height,
                            minWidth: 210,
                            minHeight: 210,
                            quadratic: false
                        });
                        this.cropData = crop.getCropData();
                        crop.on('change', function(foo,x) {
                            this.cropData = x;
                        }, this);
                        if (me.currentImageCropper) {
                            me.remove(me.currentImageCropper, true);
                        }
                        me.currentImageCropper = crop;
                        me.add(me.currentImageCropper);
                        me.doLayout();
                    };
                    imgLoad.src = imageSrc;
                },
                listeners: {
                    afterrender: function() {
                        this.fetchImage();
                    }
                }

[quixit]

Did the browser load the handle images properly?
The Z-indizes of the handles are 100 and 101. Is this overlapping with something?

[iklotzko]

Quixit,

So, for whatever reason it seems that the following style is set with an opacity to 0.

.x-window .x-resizable-handle {
    opacity: 0;
}

When I change to the following code, all works great:

.x-window .x-resizable-handle {
    opacity: 1;
}

We make pretty heavy use of the resizers in other areas of the code, we are probably resetting something, unfortunately.

Sorry to take up your time, but this looks like coder error, on our side. But, it's really nice looking now that we reset the opacity to 1.0

Thanks again,
Ira