Crop feature helps to resize the image as per the required size. You can also reduce the web page size and load time by showing the exact size image. just copy and paste code so easily use. You may also like How to Display Text Over Image Using HTML And CSS.
HTML, CSS and jQuery Code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
body
{
margin:0px;
padding:0px;
}
#crop_wrapper
{
position:relative;
margin-left:150px;
margin-top:50px;
width:600px;
height:400px;
}
#crop_wrapper img
{
width:600px;
height:400px;
}
#crop_div
{
width:300px;
height:200px;
border:1px dashed white;
position:absolute;
top:0px;
box-sizing:border-box;
}
</style>
<script type="text/javascript">
$(function() {
$( "#crop_div" ).draggable({ containment: "parent" });
});
function crop()
{
var posi = document.getElementById('crop_div');
document.getElementById("top").value=posi.offsetTop;
document.getElementById("left").value=posi.offsetLeft;
document.getElementById("right").value=posi.offsetWidth;
document.getElementById("bottom").value=posi.offsetHeight;
return true;
}
</script>
</head>
<body>
<div id="crop_wrapper">
<img src="images/crop_image.jpg">
<div id="crop_div"></div>
</div>
<form method="post" action="" onsubmit="return crop();">
<input type="hidden" value="" id="top" name="top">
<input type="hidden" value="" id="left" name="left">
<input type="hidden" value="" id="right" name="right">
<input type="hidden" value="" id="bottom" name="bottom">
<input type="submit" name="crop_image">
</form>
</body>
</html>PHP Code
<?php
if(isset($_POST['crop_image']))
{
$y1=$_POST['top'];
$x1=$_POST['left'];
$w=$_POST['right'];
$h=$_POST['bottom'];
$image="images/nintendo.jpg";
list( $width,$height ) = getimagesize( $image );
$newwidth = 600;
$newheight = 400;
$thumb = imagecreatetruecolor( $newwidth, $newheight );
$source = imagecreatefromjpeg($image);
imagecopyresized($thumb, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
imagejpeg($thumb,$image,100);
$im = imagecreatefromjpeg($image);
$dest = imagecreatetruecolor($w,$h);
imagecopyresampled($dest,$im,0,0,$x1,$y1,$w,$h,$w,$h);
imagejpeg($dest,"images/crop_image.jpg", 100);
}
?>
