1. #1
    Sencha User
    Join Date
    May 2009
    Location
    Germany
    Posts
    46
    Vote Rating
    2
    quixit is on a distinguished road

      1  

    Default Image Crop Utility

    Image Crop Utility


    Hey there,
    on github or on www.thomas-lauria.de 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:
    PHP Code:
    $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
    Last edited by quixit; 18 Aug 2013 at 10:27 PM. Reason: added github URL

  2. #2
    Sencha User
    Join Date
    Mar 2008
    Posts
    566
    Vote Rating
    0
    moegal is on a distinguished road

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    May 2009
    Location
    Germany
    Posts
    46
    Vote Rating
    2
    quixit is on a distinguished road

      0  

  4. #4
    Sencha User
    Join Date
    Mar 2008
    Posts
    566
    Vote Rating
    0
    moegal is on a distinguished road

      0  

    Default


    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

  5. #5
    Sencha User
    Join Date
    May 2009
    Location
    Germany
    Posts
    46
    Vote Rating
    2
    quixit is on a distinguished road

      0  

    Default


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

    greetings.

  6. #6
    Sencha Premium Member
    Join Date
    Mar 2009
    Posts
    16
    Vote Rating
    0
    iklotzko is an unknown quantity at this point

      0  

    Default


    Does this support Ext 3.x ?

  7. #7
    Sencha User
    Join Date
    May 2009
    Location
    Germany
    Posts
    46
    Vote Rating
    2
    quixit is on a distinguished road

      0  

    Default


    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

  8. #8
    Sencha Premium Member
    Join Date
    Mar 2009
    Posts
    16
    Vote Rating
    0
    iklotzko is an unknown quantity at this point

      0  

    Default


    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.

    Code:
    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();
                        }
                    }

  9. #9
    Sencha User
    Join Date
    May 2009
    Location
    Germany
    Posts
    46
    Vote Rating
    2
    quixit is on a distinguished road

      0  

    Default


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

  10. #10
    Sencha Premium Member
    Join Date
    Mar 2009
    Posts
    16
    Vote Rating
    0
    iklotzko is an unknown quantity at this point

      0  

    Default


    Quixit,

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

    Code:
    .x-window .x-resizable-handle {
        opacity: 0;
    }
    When I change to the following code, all works great:
    Code:
    .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

Similar Threads

  1. Can Resizeable component crop?
    By Sesshomurai in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 23 Oct 2009, 3:13 AM
  2. Help with Search Utility
    By nj_gm in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 7 Nov 2008, 9:44 AM
  3. Is there any log utility in ext?
    By yew98 in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 8 Nov 2007, 10:37 PM
  4. about Ext-yui XHR utility
    By mysticav in forum Ext 1.x: Help & Discussion
    Replies: 8
    Last Post: 23 Mar 2007, 11:20 AM

Thread Participants: 10

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar