0

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

enter image description here

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

enter image description here

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.

4

2 回答 2

3

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

  • 您的 Jcrop aspectRatio 与您的 minSize 和您的预览大小不匹配。
  • 预览图像需要放入 div 元素中。
  • 在 getCoords 函数中，rx,ry 应该与 cw 和 ch 相对

我更新了你的 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

于 2013-09-22T08:50:45.173 回答
0

JCrop seems to have issue when the selection area is not a square. 如果您将选择区域更改为正方形 (130x130) 并相应地更改代码，它应该可以工作。

于 2013-09-22T08:17:30.033 回答