JQuery JCrop - 如何設置固定大小的選擇區域？

Question

我想弄清楚如何解決JCrop下的選擇框大小。該文檔提到如何設置初始選擇區域，但不知道如何使其固定大小。有誰知道我該如何修復它。提前致謝。

http://deepliquid.com/content/Jcrop_Manual.html

Answer 1

使用this example你應該能夠保持固定的大小。

$(function(){ 
    $('#jcrop_target').Jcrop({ 
     onChange: function(){ $(this).setSelect([x, y, x2, y2]); } 
    }); 
}); 

Answer 2

您可以使用aspectRatio選項。這將迫使方選擇

$(function(){ 
    $('#cropbox').Jcrop({ 
     aspectRatio: 1 
    }); 
}); 

或者的aspectRatio：16/9將使廣sreeen :-)

Answer 3

你基本上是尋找API部分。已經廣泛使用這個插件自己，我知道你在尋找什麼：

var api; 
var cropWidth = 100; 
var cropHeight = 100; 

$(window).load(function() { 

    // set default options 
    var opt = {}; 

    // if height and width must be exact, dont allow resizing 
    opt.allowResize = false; 
    opt.allowSelect = false; 

    // initialize jcrop 
    api = $.Jcrop('#objectId', opt); 

    // set the selection area [left, top, width, height] 
    api.animateTo([0,0,cropWidth,cropHeight]); 

    // you can also set selection area without the fancy animation 
    api.setSelect([0,0,cropWidth,cropHeight]); 

}); 

Answer 4

可以設置的aspectRatio爲十進制值

$('#jcrop_target').Jcrop({ 
    setSelect: [0,0,150,100], 
    aspectRatio: 150/100 
}); 

Answer 5

嗨，這可能是有益的 -

<script> 
$(window).load(function() { 
    var jcrop_api; 
    var i, ac; 

    initJcrop(); 

    function initJcrop() { 
      jcrop_api = $.Jcrop('#imgCrop', { 
      onSelect: storeCoords, 
      onChange: storeCoords 
      }); 
      jcrop_api.setOptions({ aspectRatio: 1/ 1 }); 
      jcrop_api.setOptions({ 
      minSize: [180, 180], 
      maxSize: [180, 250] 
     }); 
     jcrop_api.setSelect([140, 180, 160, 180]); 
    }; 
    function storeCoords(c) { 
    jQuery('#X').val(c.x); 
    jQuery('#Y').val(c.y); 
    jQuery('#W').val(c.w); 
    jQuery('#H').val(c.h); 
    };   
}); 
</script> 

Answer 6

aspectRatio: 1, 
minSize: [ 100, 100 ], 
maxSize: [ 100, 100 ] 

Answer 7

這非常容易...

allowResize: false 

例如

$(function(){ 
    $("#CropSource").Jcrop({ 
     aspectRatio: 1, 
     setSelect: [50, 0, 300,300], 
     allowResize: false 
    }); 
});