After releasing the “magnetic poetry” demo I have been working hard trying to make the code more reusable for all. In the process there has been a name change from Rubberband to Lasso. The original Rubberband code has been a great source of inspiration, but not much is left of it. I have completely gutted it reworking a lot of the internal logic.
First, the eye candy 
Lasso.Crop
So far I have tested this in FF, Safari, Opera, IE6 & 7 and things look good. It doesn’t require anything but Core!
Things to note:- you can click anywhere outside of the crop area to start a new crop
- if the handlers disappear then the crop is invalid (too small)
- if min and max are the same the handlers are removed
- N,S,E,W handlers are removed for ratio constraints
- Marching ants requires a single 8×8 image. Default is ‘1px dashed #999′
- Preset option was added to help with usability, visual clue to communicate that you can crop
Download Lasso.js
Download Lasso.Crop.js
Lasso.Crop
Example
HTML
<script type="text/javascript" src="mootools.js"></script> <script type="text/javascript" src="Lasso.js"></script> <script type="text/javascript" src="Lasso.Crop.js"></script>
<img src="/images/bee.jpg" id="bee" />
Javascript
new Lasso.Crop('bee',{ ratio : false, preset : [235,140,505,340], min : [50,50], handleSize : 8, opacity : .6, color : '#7389AE', border : '/images/crop.gif', onResize : updateCoords });
Documentation
Arguments
options an object. see options below.
Options
min [w,h]/false sets the min width and height defaults to false
max [w,h]/false sets the max width and height defaults to false
ratio [16,9]/false sets the ratio constraints defaults false
contain element/false if set lasso will be contained within element, default false
border hex color or image path, sets the border of the lasso. Default ‘#999′
color masking color default ‘#7389AE’
opacity opacity of mask default .3
zindex used to make sure lasso is above all elements default 10000
Methods
attachAttaches listeners
detachDetaches all listeners
Events
startEvent fired when lasso begins
resizeEvent fired during every mousemove while lasso active returns { x, y, w, h } if ‘contain’ is set, positions are relative to container
completeEvent fired on mouseup. returns { x, y, w, h} if ‘contain’ is set, positions are relative to container
February 25th, 2009 at 3:00 pm
Nice nathan, nice!
Haven’t see the code but the demo is really good!
February 25th, 2009 at 3:06 pm
You can look anytime, no minification on it. It will be changing! There are still a few things to clean up. Overall I’m very happy about the code. All other croppers out there are at least 2x more code and have more dependencies.
February 26th, 2009 at 4:08 am
Howdy Nathan. As usual this is a really great piece of coding! How about extending it a bit so that constrained proportions are kept while holding the SHIFT button? My second idea would be to re-position the crop area by pressing the arrow keys– that would be super-sweet!
February 26th, 2009 at 7:30 am
@Oskar - keys are coming! arrows move 1px, shift+arrow 10px. Shift constrain, didn’t think of that. Good idea.
March 1st, 2009 at 8:40 am
This is really awesome. I got it working. If somebody can show me/point me the right direction on how to make multiple croppers work simultaneously on the same image, that’ll be great.
March 1st, 2009 at 9:46 am
@Kidino - I’m am not sure why you would want to have multiple croppers on the same image. From a technical standpoint there are quite a few hurdles, I don’t think its worth it.
March 4th, 2009 at 9:32 am
Hi ,
I like the script very much it is easy for implementation but i need to save the image after cropping on to the server is there any option to do this Please help it is very important for our web application.
March 4th, 2009 at 9:40 am
Did you notice that the post says preview? I am not sure it is wise to use this in a production environment quite yet. The events should give you everything you need to crop the image. If you want finer control you can play around with getRelativeCoords() on the Lasso.Crop object. This will return the same thing the events return. As far as cropping on the server side you need to pass the coords to the server and do the processing yourself. If you search my blog under Image Manipulation you should find a php script to do just that.
March 8th, 2009 at 12:14 pm
Awesome Nathan! Clear, smooth and fast. We are waiting for a stable version!
July 29th, 2011 at 4:13 pm
Any plans on putting this at github?
March 30th, 2012 at 12:55 pm
I love this thing, but it’s getting a bit out-of-date. Any chance this will get a re-work for MTv1.4.5 ? I tried to update it myself but got stuck trying to translate bindWithEvent. Thanks for a great plugin.
May 22nd, 2012 at 11:34 am
Can not figure out that how can i specify the ratio 1 : 1
I tried following
new Lasso.Crop(’crop’,{
ratio : “1:1″,
//preset : [235,140,505,340],
min : [50,50],
handleSize : 8,
opacity : .6,
color : ‘#7389AE’,
onResize : updateCoords
}
Please reply.!!
thanks in advance..!
June 4th, 2012 at 2:33 pm
Thanks a million for this! Awesome job!
November 3rd, 2012 at 3:49 pm
If you’re trying to get LassoCrop or MooCrop to work on a mobile device, you’ll need to do two things. First, you need to map all of the mouse events to touch events. You can either modify the source code to do this or you can install something like the Mouse2Touch.js adapter to translate touch events into their equivalent mouse events.
Second, the “refresh” method’s event object will need to be modified in the source file to translate touch coordinates to mouse coordinates. In my case, I added the following to the beginning of the “refresh” method:
if (Browser.isMobile) {
event.clientX = event.touches.item(0).clientX;
event.clientY = event.touches.item(0).clientY;
}