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