当前位置：文江博客话题详情

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

发布于 2024-07-10 01:52:47 字数 226 浏览 9 评论 0原文

我试图弄清楚如何修复 JCrop 下的选择框大小。该文档提到了如何设置初始选择区域，但没有提到如何使其固定大小。有谁知道我该如何修复它。提前致谢。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

还给你自由 2024-07-17 01:52:47

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

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

Using this example you should be able to keep the size fixed.

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

回复收藏 0 原文

话少心凉 2024-07-17 01:52:47

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

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

回复收藏 0 原文

无风消散 2024-07-17 01:52:47

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

});

You are basically looking for the API section. Having extensively used this plugin myself, I know exactly what you're looking for:

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]);

});

回复收藏 0 原文

哑 2024-07-17 01:52:47

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

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

you can set the aspectRatio as decimal value

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

回复收藏 0 原文

ヅ她的身影、若隐若现 2024-07-17 01:52:47

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

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

或纵横比：16/9 将使其宽屏:-)

You can use the aspectRatio option. This will force a square selection

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

Or aspectRatio: 16/9 would make it wide sreeen :-)

回复收藏 0 原文

请你别敷衍 2024-07-17 01:52:47

这非常容易......

allowResize: false

例如

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

It's remarkably easy...

allowResize: false

e.g.

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

回复收藏 0 原文

与风相奔跑 2024-07-17 01:52:47

嗨，这可能会有所帮助 -

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

Hi this might be helpful -

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

回复收藏 0 原文

~没有更多了~