JQuery JCrop – Wie lege ich einen Auswahlbereich mit fester Größe fest?

Ich versuche herauszufinden, wie ich die Größe des Auswahlfelds unter JCrop korrigieren kann. Die Dokumentation erwähnt, wie man einen anfänglichen Auswahlbereich festlegt, aber nicht, wie man ihn zu einer festen Größe macht. Weiß jemand, wie ich es reparieren könnte. Danke im Voraus.

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

Sie suchen im Grunde nach dem API-Bereich. Nachdem ich dieses Plugin selbst ausgiebig verwendet habe, weiß ich genau, wonach Sie suchen:

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

});

Sie können das Aspektverhältnis als Dezimalwert festlegen

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

Sie können die Option „aspektRatio“ verwenden. Dies erzwingt eine quadratische Auswahl

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

Oder Aspektverhältnis: 16/9 würde es breit machen 🙂

Verwenden dieses Beispiel Sie sollten in der Lage sein, die Größe festzuhalten.

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

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

Es ist bemerkenswert einfach …

allowResize: false

z.B

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

Hallo, das könnte hilfreich sein –

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