Today in modern web application, crop and resize of images is neccessary whether for profile use or general use of resized images as thumbnails. Resize and crop images is best technique to save space and to decrease page execution time and load your webpage faster. This article will cover all the needed techniques for resizing and croping images to build up a modern solution which you can use in every day situations.
Here are the steps to build functionality of croping and resizing images as thubnail.
Step 1. Create a HTML file i.e. index.html
In this file, we have defined markup and script for performing actions.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="crop_style.css">
<!-- <script type="text/javascript" src="jquery.js"></script> -->
<!-- <script type="text/javascript" src="jquery-ui.js"></script> -->
<script type="text/javascript">
$(function() {
$( "#crop_block" ).draggable({ containment: "parent" });
});
function crop()
{
var posi = document.getElementById('crop_block');
document.getElementById("top_pos").value=posi.offsetTop;
document.getElementById("left_pos").value=posi.offsetLeft;
document.getElementById("right_pos").value=posi.offsetWidth;
document.getElementById("bottom_pos").value=posi.offsetHeight;
return true;
}
</script>
</head>
<body>
<div id="crop_resize_wrapper">
[img src="images/etutorialz_image.jpg" ]
<div id="crop_block">
</div>
</div>
<form method="post" action="get_crop.php" onsubmit="return crop();">
<input type="hidden" value="" id="top_pos" name="top_pos">
<input type="hidden" value="" id="left_pos" name="left_pos">
<input type="hidden" value="" id="right_pos" name="right_pos">
<input type="hidden" value="" id="bottom_pos" name="bottom_pos">
<input type="submit" name="crop_etutorialz_image">
</form>
</body>
</html>
In this step, we have defined HTML code with jquery script for getting croping position of original image. We have created two div i.e. crop_resize_wrapper & crop_block. "crop_resize_wrapper" is the container of the image and "crop_block" is the draggable div. We have created a function crop() which get the dimension of the image. Once dimensions will get choosen, croped dimensions will get posted on php file i.e. get_crop.php.
Step 2. Create file i.e. get_crop.html
In this file, we have performed functionality for resizing & croping image by using PHP methods.
<?php
if(isset($_POST['crop_etutorialz_image']))
{
$y1=$_POST['top_pos'];
$x1=$_POST['left_pos'];
$w=$_POST['right_pos'];
$h=$_POST['bottom_pos'];
$image="images/etutorialz_image.jpg";
list( $old_width,$old_height ) = getimagesize( $image );
$new_width = 600;
$new_height = 400;
$thumb = imagecreatetruecolor( $new_width, $new_height );
$source = imagecreatefromjpeg($image);
imagecopyresized($thumb, $source, 0, 0, 0, 0, $new_width, $new_height, $old_width, $old_height);
imagejpeg($thumb,$image,100);
$im = imagecreatefromjpeg($image);
$destination = imagecreatetruecolor($w,$h);
imagecopyresampled($destination,$im,0,0,$x1,$y1,$w,$h,$w,$h);
imagejpeg($destination,"images/cropped_etutorialz_img.jpg", 100);
}
?>
PHP GD library - this is the PHP library which we have used for performing resize & crop functionality. In this step, we loaded the image from folder i.e. images/etutorialz_image.jpg and get croping dimensions from post and applied with PHP methods i.e. imagecopyresized to resize existing image and performed methos i.e. imagejpeg to create the cropped image and save it with name cropped_etutorialz_img.jpg.
Step 3. Create stylesheet i.e. crop_etutorialz.css
body {
margin:0px;
padding:0px;
}
#crop_resize_wrapper {
position:relative;
margin-left:150px;
margin-top:50px;
width:600px;
height:400px;
}
#crop_resize_wrapper img {
width:600px;
height:400px;
}
#crop_block {
width:300px;
height:200px;
border:1px dashed white;
position:absolute;
top:0px;
box-sizing:border-box;
}Here you are good to perform croping & resizing functionality on your website. You can customize this code further as per your requirement and feel free to give comments on this tutorial.