Is there a jQuery image cropping plugin similar to Facebook's image crop?

Question

I know there are thousands of jQuery plugins for image crop, but the one I need is similar to Facebook's image crop: a draggable fixed size square over a image, or a draggable image under a fixed size square.

I think there's a simple elegant code for it, instead of a 10k-50k framework for image manipulation that I'm finding everywhere.

Answer 1

I just built you a quick example of how to do it with jQuery: http://jsfiddle.net/gCqJ4/ It's not too hard and you can build off of my example. License is MIT.

There is a fundamental assumption being made here. First, your image is expected to already have been uploaded; this is just the crop part. Second, the image has a data-id attribute which specified the id of the image that the server can use.

I'll explain the JS a bit below:

First part is your typical jQuery plugin declaration:

(function($) {
    $.fn.croppable = function(settings) {

Then we take an optional argument of settings, with some sane defaults (success being your anonymous function for handling successful data submissions):

        settings = settings || {
            square: 50,
            default: 'middle',
            id: $(this).data("id"),
            success: null
        };

Next is just basic initial position calculation.

        var position = {
            x: settings.default == 'middle' ? ($(this).width() / 2) - (settings.square / 2) : 0 ,
            y: settings.default == 'middle' ? ($(this).height() / 2) - (settings.square / 2) : 0
        };

We wrap the image in a container that can be styled and used as the parent containment for the draggable cropper.

        $(this).wrap("<div class='croppable-container' style='position: relative;' />");

This is (obviously) the cropper.

        var cropper = $("<div style='position: absolute; top: " + position.y + "px; left: " + position.x + "px; height: " + settings.square + "px; width: " + settings.square + "px;' class='cropper' />");

Place it before the image:

        $(this).before(cropper);

Create a basic save button:

        var save = $("<input type='button' value='Crop Selection'/>");

And bind it to a service to receive posts for the cropping:

        save.click(function () {
           $.post("/your/service/location",
                  {
                      img: id,
                      x: cropper.position().left,
                      y: cropper.position().top,
                      height: settings.square
                  },
                  function (data) {
                      if (settings.success != null) {
                          settings.success(data);
                      }
                  }
            );
        });

        $(this).parent().width($(this).width());
        $(this).parent().height($(this).height());
        cropper.draggable({containment: "parent"});

        $(this).parent().after(save);

End of the typical plugin declaration:

    };
})(jQuery);

Call it:

$(".croppable").croppable();

As a final note, the plugin itself is only 1.61 KB. Small enough?

Answer 2

I use imgAreaSelect. It's a great tool and very easy inputs and outputs...

To elaborate:

You can set the width, height and set the "resizable" option to false to achieve allowing the user to select a specific square (although normally I give users more freedom and crop the image when they select a different size - only enforcing the aspect ration.

Granted, this is 35Kb which can be minified to < 14kb. If you want it smaller I'd suggest stripping out some of the functions you don't need before you minify it.

Answer 3

There are plenty jQuery plugins for client-side cropping (jCrop, imgAreaSelect, etc.). Maybe you will find the following blog post useful. It describes a solution for the actual cropping on the server while integrating with the Javascript libraries:

http://cloudinary.com/blog/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries