Crop image with Marquee tool in Javascript

Generating thumbnails in your web service is important for proper look. Thumbnails can be created dynamically with PHP on the fly. All is that you need to to tell your PHP function the width, height, top and left measurements of the image you want to cropped from. If you are providing these values randomly then the cropped thumbnail will be some thing you do not want. The best way is that you should crop your image right form the place you want.

In today's post we will crop thumbnails with marquee tool. Create a HTML file and write the following code after you add the image.

<input id="Imageurl" type="hidden"  value="image" />
<input id="Top" type="hidden"  value="0" />
<input id="Left" type="hidden" value="0" />
<input id="Width" type="hidden"  value="100" />
<input id="Height" type="hidden" value="100" />
<input type="button" value="Crop Thumbnails" onclick="GenerateImg();" />

Now to move the Marquee tool and update write the following JavaScript.

<script type="text/javascript">
Event.observe(window, 'load', function() {
	var MarqueeTool = new Marquee('ImageId', {
		preview: 'preview',
		color: '#000',
		customID: '',
		previewWidth: 100, 
		previewHeight:  100, 
		opacity: 0.45,
		coords: {x1: 100, y1: 100, width: 100, height: 100},
		allowResize: false, 
		allowHotKeys: false,
		hideEdges: true 
	});
	MarqueeTool.setOnUpdateCallback(onMarqueeUpdate);
});
function onMarqueeUpdate() {
    var coords = MarqueeTool.getCoords();		
}
function updateCordinates(){

	var coords = MarqueeTool.getCoords();
	$('Top').value = coords.y1;
	$('Left').value = coords.x1;
	$('Width').value = coords.width;
	$('Height').value = coords.height;
}
</script>

This script will update your coordinates as you move marquee tool on the image. Now to crop the selected are we will write the following script.

<script type="text/javascript">
function GenerateImg() {
	var postData;
	
	ImgID		=	$('ImageId');
	UrlID	=	$('Imageurl');
	TopID	=	$('Top');
	LeftID	=	$('Left');
	widthID		=	$('Width');
	heightID	=	$('Height');
	
	postData='cropImage.php?url'+'='+UrlID.value+'&top'+'='+TopID.value+
	'&left'+'='+LeftID.value+'&width'+'='+widthID.value+'&height'+'='+heightID.value;
	
	$('croppedDiv').update('<img src="images/spinner.gif"  />');
	$('croppedDiv').innerHTML;
	
	new Ajax.Request( postData,{  
		method: 'post', 
		onSuccess: function(response){
			data = response.responseText;
			$('croppedDiv').update(data);
			$('croppedDiv').innerHTML;
		}		
	});
}
</script>

To work this code you need prototype and rectmarquee libraries.

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="rectmarquee.js" ></script>

Once you have click on generate thumnbnail this will lead to you PHP file cropImage.php where you will generate your thumbnail on given values. You can generate this thumbnail with phpThumbnail.

Recommended: Creating Thumbnail with PHP

You can download the script from following link.

Download the script