UvumiTools Crop

cropping test

Click mask: Move resizer to that position
Shift + Resize: Keep current selection's aspect ratio if not enabled by default
Doubleclick on resizer: Maximize selection

Description

As the web grows and becomes more dynamic ("Web 2.0"), more and more websites have user-generated content and boast tools to let users sumbit text, images, videos, and more, providing content for entire web networks. Most of the time, people submit photos straight from their camera because they don't have photo editing programs or they don't know how to use them. This simplified tool gives your users the ability to create a selection area that can be used to crop an image live on your web site. This is an extremely useful too for any site that provides image hosting, for example.

Features

Requirements

What you'll need:

How To

Initialization

new uvumiCropper(image,options);

Arguments

Options

Public Functions

Yes, we know, there is no real private or public data javascript, but while most functions of the cropper are for internal use only, some were made to be called manually from outside. So we consider them "public".

those functions can be used like this :

var myCropper = new uvumiCropper('myImage');
myCropper.hide();
myCropper.show();
myCropper.changeImage('images/my-new-image.jpg');

Implementation

First, you simply import the files provided in the zip archive into your document. While you can insert <script> tags anywhere, we recommend you put them inside the <head> tag:

<head>
<!-- Insert these lines in your document's head -->
<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-crop.css"/>
<script type="text/javascript" src="js/mootools-for-crop.js"> </script>
<script type="text/javascript" src="js/UvumiCrop.js"> </script>
</head>

Then you must prepare the HTML code. You need one image. Let's just give it the id "myImage".

<div>
<img id="myImage" src="my_image.jpg" alt="My image" />
</div>

"my_image.jpg" is just a random image file name, we just assume it exists.

Then we initialize the cropper object with this image's ID. Don't forget to wrap the ID with quotes when passing it to the object (double or single, doesn't matter);

<script type="text/javascript" >
new uvumiCropper('myImage');
</script>

In the end, if we put everything together. Mootools requires a strict Doctype to work properly. Use something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-crop.css"/>
<script type="text/javascript" src="js/mootools-for-crop.js"> </script>
<script type="text/javascript" src="js/UvumiCrop.js"> </script> <script type="text/javascript" >
new uvumiCropper('myImage');
</script>
</head>
<body>
<div>
<img id="myImage" src="my_image.jpg" alt="My image" />
</div>
</body>
</html>

You should get something like this. A cropper with default options: 80*60 pixels, 8 handles, does not preserve aspect ratio, no preview, 50% opacity mask

example 1

Let's try a step above. This time, we'll set a fixed ratio, with a preview, and only four resizing handles. First part where you include the required script is the same. But you'll need an existing container for preview (then we'll see how to overlay it on the images). Where just going to create an empty div, with id "myPreview".

<div>
<div id="myPreview" </div> <img id="myImage" src="my_image.jpg" alt="My image" />
</div>

Then we must tell the script to use this div as a preview container when we initialize the object, with the preview option. We also said we want to keep the selection's aspect ratio, so we're going to set keepRatio to true. Also, just to show how to remove handles, we'll pass an array with only four handles to the handles option, and we'll set the coordinates to true.

<script type="text/javascript" >
new uvumiCropper('myImage',{
keepRatio:true,
preview:'myPreview'
handles:[
['top','left'],
['top','right'],
['bottom','left'],
['bottom','right']
],
coordinates:true
});
</script>

Put it together:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-crop.css"/>
<script type="text/javascript" src="js/mootools-for-crop.js"> </script>
<script type="text/javascript" src="js/UvumiCrop.js"> </script> <script type="text/javascript" >
new uvumiCropper('myImage',{
keepRatio:true,
preview:'myPreview'
handles:[
['top','left'],
['top','right'],
['bottom','left'],
['bottom','right']
],
coordinates:true
});
</script>
</head>
<body>
<div>
<div id="myPreview" </div> <img id="myImage" src="my_image.jpg" alt="My image" />
</div>
</body>
</html>

And you should get something like this. Try to resize the selection and check out how the preview reacts. Give a try to the manual inputs and see how they maintain proportions and minimums.

example 2

One more example: we're going to modify the genearal look of the cropper by assigning alternate CSS classes. We are also going to change the default minimum width and height, and, just to show that it's possible, disable resizing by removing all the handles. We are also going to try the server side script at the same time by simply adding the downloadButton options. This is not the only way to call the server script, you can do it manually with the provided public functions, but this option automatically generates a button to do it for you.

<script type="text/javascript" >
new uvumiCropper('myImage',{
maskOpicity:0.3,
maskClassName:'blueMask',
resizerClassName:'yellowSelection',
mini:{
x:120,
y:90
},
handles:false,
downloadButton:'Crop!'
});
</script>

HTML will be the same as the first exemple, but we are going to create new CSS classes, corresponding the those we set in the cropper's options

<style type="text/css" >
.yellowSelection{
background:transparent url('blank.gif') center center repeat; //necessary for IE, to give 'consistency' to the slection box
border: 2px dotted #FFB82F;
cursor:pointer;
}

.blueMask{
background-color:#00f;
}
</style>

Resulting code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-crop.css"/>
<style type="text/css" >
.yellowSelection{
background:transparent url('blank.gif') center center repeat;
border: 2px dotted #FFB82F;
cursor:pointer;
}

.blueMask{
background-color:#00f;
}
</style>
<script type="text/javascript" src="js/mootools-for-crop.js"> </script>
<script type="text/javascript" src="js/UvumiCrop.js"> </script> <script type="text/javascript" >
new uvumiCropper('myImage',{
maskOpacity:0.3,
maskClassName:'blueMask',
resizerClassName:'yellowSelection',
mini:{
x:120,
y:90
},
handles:false,
downloadButton:'Crop!'
});
</script>
</head>
<body>
<div>
<img id="myImage" src="my_image.jpg" alt="My image" />
</div>
</body>
</html>

Should produce this, if not, go back and check for typos or mistakes:

example 3

Ok, last but not least, we'll look at how the callback function works. At the same time, we are going to demonstrate the HTML resizing feature: We will pick an 800px-wide image, but we are going to scale it down to 400px match with the other. So techincally, when we draw a 100px*100px selection on this scaled down image, it virtually represents 200*200px on the full size image, the one the server will use. Same goes with top and height, and preview too, everything has to match this X2 factor. The script handles it and does all the conversion for you if the image has been scaled up or down.

We prepare the HTML first. We are going to create a form with four inputs. For the image, we are going to set the WIDTH attribute (we can either set here or with CSS, works with height too):

<div>
<img id="myImage" width="400" src="my_image.jpg" alt="My image" />
</div>
<form id="myForm" action="crop-image.php" method="post" >
<p>
<input id="input_top" name="top" type="text" readonly="readonly" />
<input id="input_left" name="left" type="text" readonly="readonly" />
<input id="input_width" name="width" type="text" readonly="readonly" />
<input id="input_height" name="height" type="text" readonly="readonly" />
</p>
<p>
<button type="submit" > Send </button>
</p>
</form>

Note that we create four read-only text inputs for this example, but in a real production environment, we'd probably set them as hidden, just like the one containing the image name (or any other kind of unique identifier). Now we want to synchronize those inputs with our cropper:

<script type="text/javascript" >
var myCropper = new uvumiCropper('myImage',{
onComplete:function(top,left,width,height){
$('input_top').set('value', top);
$('input_left').set('value', left);
$('input_width').set('value', width);
$('input_height').set('value', height);
},
preview:true,
coordinatesOpacity:1
});
</script>

While we are at it, why not make the form directly use the built-in cropping functionality? This is just an example--in a real-world case, we would either have the form submit its own value to its own custom script or just have a button to call the cropper's cropSave() function. Here we are just going to have the form submit action call the cropper's function. The inputs are only for visualisation, they are not even going to be submitted.

<script type="text/javascript" >
window.addEvent('domready',function(){
$('myForm').addEvent('submit',function(event){
event.stop(); //we stop the submit event when it happens.
myCropper.cropSave();
});
});
</script>

It's that simple!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-crop.css"/>
<script type="text/javascript" src="js/mootools-for-crop.js"> </script>
<script type="text/javascript" src="js/UvumiCrop.js"> </script> <script type="text/javascript" >
new uvumiCropper('myImage',{
onComplete:function(top,left,width,height){
$('input_top').set('value', top);
$('input_left').set('value', left);
$('input_width').set('value', width);
$('input_height').set('value', height);
},
preview:true,
coordinatesOpacity:1
});

window.addEvent('domready',function(){
$('myForm').addEvent('submit',function(event){
event.stop();
myCropper.cropSave();
});
});
</script>
</head>
<body>
<div>
<img id="myImage" width="400" src="my_image.jpg" alt="My image" />
</div>
<form id="myForm" action="crop-image.php" method="post" >
<p>
<label for="input_top" >Top: </label> <input id="input_top" name="top" type="text" readonly="readonly" />
<label for="input_left" >Left: </label> <input id="input_left" name="left" type="text" readonly="readonly" />
<label for="input_width" >Width: </label> <input id="input_width" name="width" type="text" readonly="readonly" />
<label for="input_height" >Height: </label> <input id="input_height" name="height" type="text" readonly="readonly" />
<input name="image" value="my_image.jpg" type="hidden" />
</p>
<p>
<button type="submit" > Send </button>
</p>
</form>
</body>
</html>

You can see the form's inputs being updated whenever you release the selection. Note how the values are twice as large as the actual selection because the image is scalled down by 50%:

example 4

Actual image size: 800*698 pixels
Displayed size: 400*349 pixels
Coordinates generated match the image's real size.

Known Issues

Download

Change Log