Speed up development with full-stack environments for every branch.

Learn More

How to create image cropping using jQuery UI

7596 Runs 17953 Views 8273 Copies
Saved

Saved

dipesh.parmar 55

dipesh.parmar
published 4 years ago

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
	<title>How-to-create-image-cropping-using-jquery-ui</title>
	
	<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
	<link rel="stylesheet" type="text/css" href="css/main.css" />
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	
	<script type="text/javascript" src="scripts/jquery.min.js"></script>
	<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
	<script type="text/javascript">
		/*
			called when selection changes,
			image object and selection coordination will be
			passed as arguments.
		*/
		function preview(img, selection)
		{
			/*
				check if selection are made
			*/
			if (!selection.width || !selection.height)
				return;
			
			/*
				setting scaling variable
			*/
			var scaleX = 100 / selection.width;
			var scaleY = 100 / selection.height;
			
			/*
				adding appropriate css to preview image
			*/
			$('#preview img').css(
			{
				width: Math.round(scaleX * 300),
				height: Math.round(scaleY * 300),
				marginLeft: -Math.round(scaleX * selection.x1),
				marginTop: -Math.round(scaleY * selection.y1)
			});
			
			/*
				setting value for coordinator input fields.
			*/
			$('#x1').val(selection.x1);
			$('#y1').val(selection.y1);
			$('#x2').val(selection.x2);
			$('#y2').val(selection.y2);
			$('#w').val(selection.width);
			$('#h').val(selection.height);    
		}

		$(function ()
		{
			$('#photo').imgAreaSelect(
			{
				/*
					A string of the form
					"width:height"
					which represents the aspect ratio to maintain
					example: "4:3"
				*/
				aspectRatio: '1:1',
				/*
					If set to true,
					resize handles are shown on the selection area;
					if set to "corners", only corner handles are shown
					default: false
				*/
				handles: true,
				fadeSpeed: 200,
				/*
					Callback function called when selection changes,
					we are calling our preview function for demo.
				*/
				onSelectChange: preview
			});
		});
	</script>
</head>
<body>
	<div class="container demo">
		<div style="float: left; width: 50%;">
			<p class="instructions">
				Click and drag on the image to select an area. 
			</p>
			<!--
				Image container that we will use to crop
			-->
			<div class="frame" style="margin: 0 0.3em; width: 300px; height: 300px;">
				<img id="photo" src="http://odyniec.net/projects/imgareaselect/flower2.jpg" />
			</div>
		</div>
 
		<div style="float: left; width: 50%;">
			<p style="font-size: 110%; font-weight: bold; padding-left: 0.1em;">
				Selection Preview
			</p>
  
			<div class="frame" style="margin: 0 1em; width: 100px; height: 100px;">
				<!--
					Image selection for crop,
					will be previewed here.
				-->
				<div id="preview" style="width: 100px; height: 100px; overflow: hidden;">
					<img src="http://odyniec.net/projects/imgareaselect/flower2.jpg" style="width: 100px; height: 100px;" />
				</div>
			</div>
			
			<!--
				Image selection x,y position,
				with height and with input container
			-->
			<table style="margin-top: 1em;">
				<thead>
					<tr>
						<th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
							Coordinates
						</th>
						<th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
							Dimensions
						</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td style="width: 10%;"><b>X<sub>1</sub>:</b></td>
						<td style="width: 30%;"><input type="text" id="x1" value="-" /></td>
						<td style="width: 20%;"><b>Width:</b></td>
						<td><input type="text" value="-" id="w" /></td>
					</tr>
					<tr>
						<td><b>Y<sub>1</sub>:</b></td>
						<td><input type="text" id="y1" value="-" /></td>
						<td><b>Height:</b></td>
						<td><input type="text" id="h" value="-" /></td>
					</tr>
					<tr>
						<td><b>X<sub>2</sub>:</b></td>
						<td><input type="text" id="x2" value="-" /></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td><b>Y<sub>2</sub>:</b></td>
						<td><input type="text" id="y2" value="-" /></td>
						<td></td>
						<td></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).