Question

I am using JCrop plugin to crop image, things are working good with following code. i.e. User can able to select area of image to crop.

But my question is how can i pre-define image size box so that user can move the box to select image and when they click on corp button thumbnail of that selected area is crop.

For example: Visit this link http://deepliquid.com/projects/Jcrop/demos.php?demo=advanced
Now Select a part of image and only check “Selection can be moved”, deselect all other checkbox.

I want to know how can i generate JCrop JQuery code for only “Selection can be moved” option, so that i can select only that part of image to generate thumbnail.

Thank you.

<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('#imgCrop').Jcrop({
      onSelect: storeCoords
    });
  });

  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 1

$(function() {
$('#img').Jcrop({            
onSelect:  storeCoords, 
onChange: storeCoords            
});

function storeCoords(c) {jQuery('#X').val(c.x);jQuery('#Y').val(c.y);jQuery('#W').val(c.w);jQuery('#H').val(c.h);
};