Extjs Jcrop - Crop image with preview

Question

I try to make preview when i crop a image look like http://jsfiddle.net/YN7ba/

With region: 'east' is preview has width:130 and height:100, And region: 'center' is origal image
But when i crop the image preview not correct like

Here is my code

tbar:[{
            text:'Crop',
            handler:function(){
                var me = this;
                $("#myavatar").Jcrop({
                    aspectRatio: 1,
                    minSize : [130,100],
                    onSelect:me.getCoords,
                    onChange:me.getCoords
                },function(){
                  // Use the API to get the real image size
                  var bounds = this.getBounds();
                  boundx = bounds[0];
                  boundy = bounds[1];
                });
            },
            getCoords:function(c){      
                if (parseInt(c.w) > 0) {
                xsize = 130,
                ysize = 100;

                var rx = xsize / c.w;
                var ry = ysize / c.h;
                $pimg = $('#preview');
                $pimg.css({
                  width: Math.round(rx * boundx) + 'px',
                  height: Math.round(ry * boundy) + 'px',
                  marginLeft: '-' + Math.round(rx * c.x) + 'px',
                  marginTop: '-' + Math.round(ry * c.y) + 'px'
                });
              }
            }
}],

How to fix that thanks.

Answer 1

I check your code and find have some issue:

• your Jcrop aspectRatio not match with you minSize and your preview size.
• preview image need place into a div element.
• In the getCoords function rx,ry shoud relative with c.w and c.h

I update your jsfiddle.Please check!

Ext.onReady(function () {
 var win = Ext.create('Ext.window.Window', {
        title: 'test',
        layout: 'border',
        width: 500,
        height: 400,
        tbar:[{
            text:'Crop',
            handler:function(){
                var me = this;
                $("#myavatar").Jcrop({
                    aspectRatio: 1,
                    minSize : [130,130],
                    onSelect:me.getCoords,
                    onChange:me.getCoords
                },function(){
                  // Use the API to get the real image size
                  var bounds = this.getBounds();
                  boundx = bounds[0];
                  boundy = bounds[1];
                });
            },
            getCoords:function(c){      
                if (parseInt(c.w) > 0) {
                xsize = 130,
                ysize = 130;
                debugger;    
                var rx = xsize / c.w;
                var ry = ysize / c.h;
                $pimg = $('#preview');
                $pimg.css({
                  width: Math.round(boundx*rx) + 'px',
                  height: Math.round( boundy*ry) + 'px',
                  marginLeft: '-' + Math.round(rx * c.x) + 'px',
                  marginTop: '-' + Math.round(ry * c.y) + 'px'
                });
              }
            }
        }],
        items: [  
        {
            region: 'east',
            width: 200,
            items : [{
                xtype:'panel',
                width:130,
                height:130,
                items:[{
                    xtype:'image',
                    id : 'preview',
                    src: 'http://www.searchenginepeople.com/wp-content/uploads/2011/12/Vancouver-Skyline.jpg'
                }]
            }]
        },{
            region: 'center',
            autoScroll: true,
            items: [{
                id:'myavatar',
                xtype:'image',          
                src: 'http://www.searchenginepeople.com/wp-content/uploads/2011/12/Vancouver-Skyline.jpg'
            }]
        }]
    }).show();
});

jsfiddle