2015-06-22 51 views
1

我正在使用Jcrop插件來處理頭像剪裁任務。我現在堅持要如何將選擇框設置爲固定框,具體取決於用戶的偏好。在頁面頂部有一個複選框,用戶可以選擇他們想要的固定選擇框或用戶可以調整大小的裁剪框。在Rails中使用JQuery Jcrop插件進行頭像剪裁

$("#cropbox").Jcrop({ 
    onChange: showCoords, 
    onSelect: showCoords, 
    bgOpacity: .5, 
    aspectRatio: 1, 
    //minSize: [ 400, 400 ], 
    //maxSize: [ 400, 400 ], 
    setSelect: getDimensions(), 
    bgColor: 'black' 
}); 

通過同時設置「minSize屬性」和「最大範圍」設置爲[400,400],我設法選擇框設置爲一個固定大小那裏是沒有辦法讓用戶調整其大小。

<input type="checkbox" id="checkbox"/> Fixed to 400px <br /> 

接着,有一個複選框,其中用戶可以選擇它來確定選擇框的大小,或取消選擇它,以便用戶可以調整選擇框。

我不知道如何根據複選框的選擇來修改「minSize」和「maxSize」。如何修改他們都爲[0,0],使用戶可以調整它的大小...

$('#checkbox').click(function(){ 
    if (this.checked) { 
    this.minSize = [400,400], 
    this.maxSize = [400,400], 
    } 
    else{ 
    this.minSize = [0,0], 
    this.maxSize = [0,0], 
    } 
}) 

回答

0

應將此設置您的jcrop元素。我們接受jcrop_api是您之前設置的元素:

var jcrop_api = $('#cropbox')。Jcrop({ ... });

然後檢查您可以將設置發送到您的jcrop元素。

$('#checkbox').click(function(){ 
     if (this.checked) { 
     jcrop_api.setOptions({ 
      minSize = [400,400], 
      maxSize = [400,400], 
     }); 
     } 
     else{ 
     jcrop_api.setOptions({ 
      minSize = [0,0], 
      maxSize = [0,0], 
     }); 
     } 
    });