Feb 25 2009

14

Lasso.Crop Preview

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

x: y: w: h:
x:  y:
x:  y:
 

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

Tags: , ,

14 Responses to “Lasso.Crop Preview”

  1. fabio m. costa says:

    Nice nathan, nice!
    Haven’t see the code but the demo is really good!

  2. nwhite says:

    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.

  3. Oskar Krawczyk says:

    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!

  4. nwhite says:

    @Oskar - keys are coming! arrows move 1px, shift+arrow 10px. Shift constrain, didn’t think of that. Good idea.

  5. Kidino says:

    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.

  6. nwhite says:

    @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.

  7. Subhashini says:

    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.

  8. nwhite says:

    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.

  9. Tatai says:

    Awesome Nathan! Clear, smooth and fast. We are waiting for a stable version!

  10. Fábio Miranda Costa says:

    Any plans on putting this at github? :)

  11. David says:

    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.

  12. Kunal says:

    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..!

  13. Jay says:

    Thanks a million for this! Awesome job!

  14. Sheldon Chang says:

    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;
    }

Leave a Reply