I'm trying to figure out how to fix the selection box size under JCrop. The documentation mentions how to set an initial selection area but not how to make it fixed size. Does anybody knows how could I make it fixed. Thanks in advance.
- 1I'd rather go for a fixed aspect ratio and resize server side.Svish– Svish2012-02-26 10:06:36 +00:00Commented Feb 26, 2012 at 10:06
Add a comment |
7 Answers
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]); }); 
2 Comments
quickshiftin
I found this demo shows off the full feature set of jCrop quite nicely.
Arjun Arora
@Corey Ballou, Can we add a rectangle or any other shape using JCROP js?
you can set the aspectRatio as decimal value
$('#jcrop_target').Jcrop({ setSelect: [0,0,150,100], aspectRatio: 150/100 }); 
Comments
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 :-)
2 Comments
Corey Ballou
A square is not the same thing as a fixed size.
The Disintegrator
Then he should use something like minSize: [ 100, 150], maxSize: [ 100, 150] deepliquid.com/content/Jcrop_Manual.html Specifying the same dimensions for min and max
aspectRatio: 1, minSize: [ 100, 100 ], maxSize: [ 100, 100 ] 
Comments
Using this example you should be able to keep the size fixed.
$(function(){ $('#jcrop_target').Jcrop({ onChange: function(){ $(this).setSelect([x, y, x2, y2]); } }); }); 
1 Comment
Corey Ballou
That seems like a fairly hackish way of setting a fixed size crop area by forcing a resize after the change event has finished firing.
It's remarkably easy...
allowResize: false e.g.
$(function(){ $("#CropSource").Jcrop({ aspectRatio: 1, setSelect: [50, 0, 300,300], allowResize: false }); }); 
Comments
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> 