Crop and preview an image by using jcrop

Others

Posted on 24 May 17 by Vickey
  817



When we upload images they may not be fit to our requirement like size or height and width so we need to crop that image. Some times we upload image and then crop it in server side. But if you have a large image and you want to crop a specific part for example you have a jungle image with an elephant and you want the elephant part only then you need a special croping tool. There are many window tools to crop an image but by using jcrop we can crop our image on the same time when we upload it.Lets do it in few steps

Step 1. Create a directory with index.html file and add the below code in index.html file.

<html>
<head>
<title> Crop Image </title>
<link href="css/Jcrop.css" rel="stylesheet" type="text/css" /> 
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/bootstrap.min.js'></script>
<script type='text/javascript' src='js/Jcrop.js'></script>
<script type='text/javascript' src='js/myjs.js'></script>
</head>
<body>
<h1>Image Crop and Preview</h1>
	<div class="form-group">
		<form >
			<input type="file" name="img" id="img">
		</form>
	</div>
	<div id="imageList"></div>
	<div id="myModal" class="modal fade" role="dialog" >
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Upload Image</h4>
                </div>
                <form  method="post" onsubmit="return checkCoords();" id="imageCropForm">
                    <div class="modal-body" style="overflow:scroll;">
                        <div class="form-group">
                            <img src="" id="cropbox" />
                            <input type="hidden" id="x" name="x" />
                            <input type="hidden" id="y" name="y" />
                            <input type="hidden" id="w" name="w" />
                            <input type="hidden" id="h" name="h" />
                            <input type="hidden" id="rowImageData" name="rowImageData" />
                        </div> 
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success" >Crop Image</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

Step 2.  Create a css and a js directory. In css directory download the jcrop.css and bootstrap.css files and in js directory download jquery.js, bootstrap.js and jcrop.js. In your index.html file add the path for these files

'<link href="css/Jcrop.css" rel="stylesheet" type="text/css" /> 
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/bootstrap.min.js'></script>
<script type='text/javascript' src='js/Jcrop.js'></script>
<script type='text/javascript' src='js/myjs.js'></script>'

Step 3. Now we will process the file data in php a file so create a php file name as crop.php and add the below code

$rowImageData 		= 	explode(',',$_POST['rowImageData']);
$imgDataString 		= 	$rowImageData[1];
$imgMimeType 		= 	$rowImageData[0];
$imgData 			= 	base64_decode($imgDataString);
$targ_w = $_POST['w'];
$targ_h = $_POST['h'];
$jpeg_quality = 90;
$img_r = imagecreatefromstring($imgData);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);
ob_start (); 
imagejpeg ($dst_r);
$image_data = ob_get_contents (); 
ob_end_clean (); 
$imgString =  $image_data_base64 = base64_encode ($image_data); 
echo $finalImage =  $imgMimeType.','.$imgString; die; 

Now you can crop any image according to your requirment. 

You can download source code here


If this post help you reduce time to develop, you can help me to maintain this website :)
www.000webhost.com