Sep 26 2008

10

MooCrop update

Category: Image Manipulation — Tags: , ,

I have been amazed by the response I have received since releasing MooCrop. I’m slightly embarrassed that the project has suffered from decay over recent months. I have been insanely busy working at a startup and the thought of looking at more code at home made me nauseous. Over the past few months I have been able to get a handle on the various projects and look forward to being more active in the community.

With all that said I would like to thank Rok for putting in the extra effort to update MooCrop to run with Mootools 1.2. In addition Rok added ratio constraints, a feature that should make many happy.

All the documentation at http://www.nwhite.net/MooCrop/ and examples still apply.

An example of using the new constrainRatio option.

new MooCrop('crop_example', {
       'constrainRatio' : true
});

Click to Download MooCrop for Mootools 1.2

I have had several requests for the php code that I used in the final example to perform the crop. Below is the listing of the code. Its a quick an dirty hack but should provide a place to start.

<?php
 
$w = $_REQUEST['w'];
$h = $_REQUEST['h'];
$x = $_REQUEST['x'];
$y = $_REQUEST['y'];
 
header ("Content-type: image/jpg");
 
$src = @imagecreatefromjpeg("images/moo.jpg");
 
$im = @imagecreatetruecolor($w, $h);
 
imagecopy($im,$src,0,0,$x,$y,$w,$h);
 
imagejpeg($im);
imagedestroy($im);
 
?>

More enhancements will be added to MooCrop in the near future.

Tags: , ,

10 Responses to “MooCrop update”

  1. Fabio M. Costa says:
    September 30th, 2008 at 1:34 pm

    Congratulations! that’s the best plugin for cropping images for mootools, but you should improve it more! the TODO list you have is a good start hehe! keep up the good work!
    I’ve changed it to 1.2 too, it was easy, but i had no way to tell you this… Have a nice day.

  2. Ash says:
    October 19th, 2008 at 3:34 pm

    Those ratio constraints dont work, except on squares.

    There are some bugs in the masking I think, but I’ve fixed the constraints to work with other ratios for those who need it working -> http://javascript.pastebin.com/f2cbd3ec

  3. nwhite says:
    October 20th, 2008 at 11:28 am

    Thanks Ash. I just had a chance to look over the code from Rok and Ash. I am not happy at all with how the ‘refresh’ method has been modified. It eliminates all the advantages of the fast looping prior to the auto constraint addition.

    I know there is some hidden gotchas going on in there, but the N,S,E,W case was setup in that order for a very specific reason. It had to do with how the box model is rendered in the browsers.

    I am in the middle of a rewrite. I will post more shortly.

  4. Asper says:
    October 25th, 2008 at 6:35 pm

    Thanks for this great plugin! Made a small update to the script to accept “Real Ratio” (it doesn’t modifies the refresh method) http://javascript.pastebin.com/f5e46c49f

  5. Xodust says:
    November 13th, 2008 at 12:27 pm

    Good lookin’ on the plugin. However I am having some trouble getting the remove overlay to fire as click event. Can you post an example?

  6. Oliver says:
    December 7th, 2008 at 5:01 am

    Great script. Works perfectly.
    With the min property, it sets the minimum crop area; any chance anyone can help out with a ‘defaultSize’ option, such that when the cropper loads, it’s preset at a certain width and height, but the mininum still exists to prevent going below a certain width/height?

    Let me know. can be reached at onassar at (gmail address)

    Thanks.

  7. j says:
    December 27th, 2008 at 11:48 pm

    How might I add a title attribute to the draggable crop div? I’d like to add “Double Click Me” to it.

  8. nwhite says:
    January 14th, 2009 at 11:19 am

    Once you initialize MooCrop you could access it through the object.

    var crop = new MooCrop(el,options);
    crop.cropArea.set(’html’,'Double Click Me’);

  9. _dan says:
    February 16th, 2009 at 12:16 am

    Dropping another update.

    I’ve reduced the code from Asper’ script. So there’s no constrainRealRatio option, just the original constrainRatio option but working as real.

    http://javascript.pastebin.com/m28aa595e

  10. _dan says:
    February 16th, 2009 at 12:22 am

    Oh yeah, i was forgetting to say.. also, it now resizes the crop area if the image to be cropped is smaller (w or h) than the crop area.

    Thanks for the original script btw.

Leave a Reply