example - JQuery JCrop-¿Cómo establecer un área de selección de tamaño fijo?

jquery crop image mobile

Question

Estoy intentando descubrir cómo arreglar el tamaño del cuadro de selección en JCrop. La documentación menciona cómo establecer un área de selección inicial, pero no cómo hacerlo de tamaño fijo. ¿Alguien sabe cómo puedo arreglarlo? Gracias por adelantado.

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

Answer 1

Puede usar la opción aspectRatio. Esto forzará una selección cuadrada

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

O aspectoRatio: 16/9 lo haría amplio sreeen :-)

Answer 2

Con este ejemplo , deberías poder mantener el tamaño fijo.

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

Answer 3

Básicamente estás buscando la sección API. Después de haber usado extensivamente este plugin, sé exactamente lo que estás buscando:

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

});

Answer 4

puede configurar aspectRatio como valor decimal

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

Answer 5

Hola, esto podría ser útil -

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

Answer 6

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

Answer 7

Es notablemente fácil ...

allowResize: false

p.ej

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