web-dev-qa-db-fra.com

JQuery JCrop - Comment définir une zone de sélection de taille fixe?

J'essaie de comprendre comment corriger la taille de la boîte de sélection sous JCrop. La documentation mentionne comment définir une zone de sélection initiale mais pas comment lui donner une taille fixe. Est-ce que quelqu'un sait comment pourrais-je le réparer? Merci d'avance.

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

jquerycropjcrop
28
user43092

Vous recherchez essentiellement la section API. Ayant largement utilisé ce plugin moi-même, je sais exactement ce que vous recherchez:

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

});
36
Corey Ballou

vous pouvez définir l'aspectRatio comme valeur décimale

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

Vous pouvez utiliser l'option aspectRatio. Cela forcera une sélection carrée

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

Ou aspectRatio: 16/9 le rendrait large :-)

13
The Disintegrator

En utilisant cet exemple vous devriez pouvoir garder la taille fixe.

$(function(){
    $('#jcrop_target').Jcrop({
        onChange: function(){ $(this).setSelect([x, y, x2, y2]); }
    });
});
6
muhuk
aspectRatio: 1,
minSize: [ 100, 100 ],
maxSize: [ 100, 100 ]
5
CyberJunkie

C'est remarquablement facile ...

allowResize: false

par exemple.

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

Salut, cela pourrait être utile -

<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>
1
Vipul Pawsakar