Extjs Jcrop-带预览的裁剪图像

我尝试在裁剪图像时使预览看起来像

使用

区域：“东”是预览的
宽度：130
和
高度：100
，而
区域：“中”是原始图像

但是当我裁剪图像时预览不正确，就像


这是我的密码

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'
                });
              }
            }
}],

如何修复此问题，谢谢。
当选择区域不是正方形时，JCrop似乎有问题。如果您将选择区域更改为正方形（130x130），并相应地更改代码，则应该可以使用。
JCrop在选择区域不是正方形时似乎有问题。如果您将选择区域更改为正方形（130x130）并相应地更改代码，它应该可以工作。
我检查了您的代码，发现有一些问题：


您的Jcrop aspectRatio与您的minSize和预览不匹配
尺寸
预览图像需要放置在div元素中
在getCoords函数rx中，ry应与c.w和c.h相对

我更新了你的JSFIDLE。请检查

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

我检查了您的代码，发现有一些问题：


您的Jcrop aspectRatio与您的minSize和预览不匹配
尺寸
预览图像需要放置在div元素中
在getCoords函数rx中，ry应与c.w和c.h相对

我更新了你的JSFIDLE。请检查

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

你到底想完成什么？如果将东部区域的图像的高度和宽度设置为裁剪区域的高度和宽度，则会破坏纵横比，因为图像本身被约束为裁剪区域的方形。@ExistDissole我认为设置宽度和高度是必要的，如果我删除它，问题仍然是一样的？你到底想完成什么？如果将东部区域的图像的高度和宽度设置为裁剪区域的高度和宽度，则会破坏纵横比，因为图像本身被约束为裁剪区域的方形形状。@existdissolve我认为设置宽度和高度是必要的，如果我将其删除，问题仍然是一样的？