JQuery JCrop - 如何设置固定大小的选择区域？

Question

我正在尝试弄清楚如何在JCrop下修复选择框大小。文档提到如何设置初始选择区域，但没有提及如何使其大小固定。有人知道该如何使其大小固定吗？先感谢您。

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

- user43092

---

我宁愿选择固定的纵横比并在服务器端进行调整大小。 - Svish

Answer 1

你基本上在寻找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]);

});

- Corey Ballou

---

我发现这个演示非常好地展示了jCrop的全部功能。 - quickshiftin

@Corey Ballou，我们可以使用JCROP js添加矩形或其他形状吗？ - Arjun

Answer 2

你可以将aspectRatio设置为小数值。

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

- tuffkid

Answer 3

您可以使用aspectRatio选项。这将强制选择一个正方形

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

或者 aspectRatio: 16/9 将使其成为宽屏 :-)

- The Disintegrator

---

一个正方形并不等同于一个固定的大小。 - Corey Ballou

然后他应该使用类似如下的代码：minSize: [100, 150], maxSize: [100, 150]http://deepliquid.com/content/Jcrop_Manual.html请注意，在这里将最小值和最大值指定为相同的尺寸。 - The Disintegrator

Answer 4

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

- CyberJunkie

Answer 5

使用这个例子，您应该能够保持大小不变。

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

- muhuk

---

这似乎是一种相当粗糙的方式，通过在更改事件完成后强制重新调整大小来设置固定大小的裁剪区域。 - Corey Ballou

Answer 6

这非常容易...

allowResize: false

e.g.

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

- WalterEgo

Answer 7

嗨，这可能会有所帮助 -

<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>

- Vipul Pawsakar