[IPOL discuss] JCrop to select a subimage

[Pascal Getreuer]

Dear Miguel,

Thanks for noting the Jcrop library, this is neat.

I took a quick look through the manual, here is what I learned.  Jcrop
is based on the JQuery JavaScript library.  Basic usage of Jcrop is
very simple.  In the header, you include

<script src="js/jquery.pack.js"></script>
<script src="js/jquery.Jcrop.pack.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

Then you can turn an <img> into a Jcrop-enabled interface with

<img src="flowers.jpg" id="cropbox" />
<script language="Javascript">
    jQuery(function() {
        jQuery('#cropbox').Jcrop();
    });
</script>

It is possible to link the Jcrop interface with four text boxes X1,
Y1, X2, Y2.
http://deepliquid.com/projects/Jcrop/demos/tutorial2.html
This is apparently to provide a fallback when the client does not have
JavaScript, but our current two-click solution on IPOL is better.

Finally, Jcrop has a few settings like constraining the aspect ratio
of the selection (e.g., must be a square) and visual customization.


Compared to how we do subimage selection on IPOL now, Jcrop is nice
because it is indeed more interactive.  It is intuitive, it is
possible to make adjustments to the selection, and it is faster.  On
top of that the visualization is very nice.

The big downside, however, is Jcrop's fallback behavior when the
client does not have JavaScript.  While Jcrop can fall back to entry
through X1, Y1, X2, Y2 textboxes, this is more painful than the
two-click interface we have now.

Would it be possible to use Jcrop in a way that falls back to the
two-click interface instead?  (This is beyond my JavaScript skills.)
I hope you web pros on the discussion list can take a look.  It would
be great if we can use this.

Best,
Pascal