ExtJS的Jcrop - 與預覽

裁剪圖像我儘量讓預覽當我裁剪圖像的樣子http://jsfiddle.net/YN7ba/ExtJS的Jcrop - 與預覽

enter image description here

隨着region: 'east'是預覽有width:130和height:100和region: 'center'是origal圖像
但是，當我裁剪圖像預覽不正確像

enter image description here

這裏是我的代碼

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

如何解決的感謝。

來源

2013-09-22 DeLe

究竟是你想實現什麼目標？如果您在東部地區的作物區域的設置圖像的高度和寬度，你要摧毀的寬高比，因爲圖像本身被限制在作物面積的方形。 – existdissolve

@existdissolve我想設置寬度和高度是必要的，如果我刪除，問題仍然是一樣的嗎？ – DeLe

我檢查你的代碼，發現有一些問題：

您Jcrop的aspectRatio不匹配您minSize屬性和您的預覽大小。
預覽圖像需要放在一個div元素。
在getCoords功能RX，RY相對768,16與c.w和c.h

我更新jsfiddle.Please檢查！

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-22 08:50:45 coonooo

JCrop似乎有問題，當選擇區域是不是正方形。如果您將選擇區域更改爲方形（130x130）並相應地更改代碼，則該選項應起作用。

來源

2013-09-22 08:17:30 Jardalu

ExtJS的Jcrop - 與預覽

回答

相關問題