Extjs Jcrop - 预览裁剪图像

Question

我裁剪图像时会尝试预览 http://jsfiddle.net/YN7ba/

region: 'east'预览有width:130和height:100，而region: 'center'是原始图片
但是当我裁剪图像预览不正确时，如

这是我的代码

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

如何解决这个问题。

Answer 1

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

• 您的Jcrop aspectRatio与您的minSize和预览不匹配 尺寸。
• 预览图片需要放入div元素。
• 在getCoords函数rx中，ry与c.w和c.h相关。

我更新你的jsfiddle。请检查！

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

Answer 2

当选择区域不是正方形时，JCrop似乎有问题。如果您将选择区域更改为方形（130x130）并相应地更改代码，则应该可以正常工作。