0

http://jsfiddle.net/YN7ba/のように画像をトリミングするときにプレビューを作成しようとしています

ここに画像の説明を入力

With region: 'east'is preview has width:130and height:100, and region: 'center'is original image
しかし、私が画像プレビューをトリミングすると、

ここに画像の説明を入力

これが私のコードです

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

そのおかげで修正する方法。

4

2 に答える 2

3

私はあなたのコードをチェックし、いくつかの問題があることを発見しました:

  • Jcrop のアスペクト比が 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 に問題があるようです。選択領域を正方形 (130x130) に変更し、それに応じてコードを変更すると、機能するはずです。

于 2013-09-22T08:17:30.033 に答える