Table of Contents
Getting Started
Please take note that Bootstrap used in this tutorial is hosted, so you need an internet connection for them to work.
Creating a Database
1. Open phpMyAdmin.
2. Click databases, create a database and name it as a crop.
3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.
CREATE TABLE `images` ( `imageid` INT(11) NOT NULL AUTO_INCREMENT, `location` VARCHAR(200) NOT NULL, `date_added` datetime NOT NULL, PRIMARY KEY(`imageid`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Creating an Output Folder
Next, we create a new folder, and we’re going to name it to upload. This will be our output folder for uploaded images.
index.php
This is our index which contains our upload form.
<?php $folder = 'upload/'; $or_w = 500; if(isset($_POST['upload'])){ $image = $_FILES['image']['tmp_name']; $filename = basename($_FILES['image']['name']); list($width, $height) = getimagesize($image); $or_h = ($height/$width)* $or_w; $src = imagecreatefromjpeg($image); $tmp = imagecreatetruecolor($or_w, $or_h); imagecopyresampled($tmp, $src, 0, 0, 0, 0, $or_w, $or_h, $width, $height); imagejpeg($tmp, $folder.$filename); imagedestroy($tmp); imagedestroy($src); $filename = urlencode($filename); header('location:crop.php?file='.$filename); } ?> <!DOCTYPE html> <html> <head> <title>Cropping Image using JCROP</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <h1 class="page-header text-center">Cropping Image using JCROP</h1> <div class="col-md-4 col-md-offset-4"> <form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data"> <input type="file" name="image" id="image" required><br> <input type="submit" value="Upload" name="upload" class="btn btn-primary"> </form> </div> </div> </body> </body> </html>
crop.php
This is our cropping page.
<?php $filename = $_GET['file']; ?> <!DOCTYPE html> <html lang="en"> <head> <title>Cropping Image using JCROP</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <script src="js/jquery.min.js"></script> <script src="js/jquery.Jcrop.js"></script> <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" /> <script type="text/javascript"> $(function(){ $('#cropbox').Jcrop({ aspectRatio: 1, onSelect: updateCoords }); }); function updateCoords(c){ $('#x').val(c.x); $('#y').val(c.y); $('#w').val(c.w); $('#h').val(c.h); }; function checkCoords(){ if (parseInt($('#w').val())) return true; alert('Please select a crop region then press submit.'); return false; }; </script> </head> <body> <div class="container"> <h1 class="page-header text-center">Cropping Image using JCROP</h1> <div class="row"> <div class="col-md-8 col-md-offset-2"> <img src="upload/<?php echo $filename; ?>" id="cropbox"> <form action="save.php?file=<?php echo $filename; ?>" method="post" onsubmit="return checkCoords();"> <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" /> <br> <input type="submit" value="Save Image" class="btn btn-primary btn-large btn-inverse"> <br><br> </form> </div> </div> </div> </body> </html>
save.php
This is our PHP code in saving the cropped images.
<?php $file = $_GET['file']; $location = 'upload/'.$file; $newFile = time().'_'.$file; $newloc = 'upload/'.$newFile; $targ_w = $targ_h = 250; $img_r = imagecreatefromjpeg($location); $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']); imagejpeg($dst_r, 'upload/'.$newFile); //connection $conn = new mysqli('localhost', 'root', '', 'crop'); $sql="insert into images (location, date_added) values ('$newloc', NOW())"; $conn->query($sql); header('location:view.php'); ?>
view.php
This contains our images table.
<!DOCTYPE html> <html> <head> <title>Cropping Image using JCROP</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <h1 class="page-header text-center">Images Table</h1> <div class="col-md-8 col-md-offset-2"> <div class="row"> <div class="col-md-12"> <a href="index.php" class="btn btn-primary pull-right">Home</a> </div> </div><br> <table class="table table-bordered table-striped"> <thead> <th>Image</th> <th>Location</th> <th>Date Added</th> </thead> <tbody> <?php $conn = new mysqli('localhost', 'root', '', 'crop'); $sql="select * from images order by imageid desc"; $query=$conn->query($sql); while($row=$query->fetch_array()){ ?> <tr> <td><a href="<?php echo $row['location']; ?>"><img src="<?php echo $row['location']; ?>" width="30px" height="30px" class="thumbnail"></td> <td><?php echo $row['location']; ?></td> <td><?php echo date('M d, Y h:i A', strtotime($row['date_added'])); ?></td> </tr> <?php } ?> </tbody> </table> </div> </div> </body> </html>