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

use*_*092 28 jquery crop jcrop

我想弄清楚如何修复JCrop下的选择框大小.该文档提到了如何设置初始选择区域,但没有提到如何设置固定大小.有谁知道我怎么能修好它.提前致谢.

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

Cor*_*lou 36

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

});
Run Code Online (Sandbox Code Playgroud)

  • 我发现 [这个演示](http://deepliquid.com/projects/Jcrop/demos/tutorial5.html) 很好地展示了 jCrop 的完整功能集。 (2认同)

小智 14

您可以将aspectRatio设置为十进制值

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


The*_*tor 13

您可以使用aspectRatio选项.这将迫使正方形选择

$(function(){
    $('#cropbox').Jcrop({
        aspectRatio: 1
    });
});
Run Code Online (Sandbox Code Playgroud)

或者aspectRatio:16/9会让它变宽:-)


muh*_*huk 6

使用此示例,您应该能够保持大小固定.

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


Cyb*_*kie 5

aspectRatio: 1,
minSize: [ 100, 100 ],
maxSize: [ 100, 100 ]
Run Code Online (Sandbox Code Playgroud)