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

Question

Estoy tratando de averiguar 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

Usando this example usted debe ser capaz de mantener el tamaño fijo.

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

Answer 2

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

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

O aspectRatio: 16/9 haría más amplia sreeen :-)

Answer 3

Básicamente estás buscando la sección API. Después de haber utilizado ampliamente este plugin mismo, sé exactamente lo que está 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 establecer el 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 muy fácil ...

allowResize: false 

p. Ej.

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