Of Stack

Detailed explanation of practical examples of image cutting based on PHP and JQueryJcrop

  • 2021-07-09 07:36:21
  • OfStack

We can often see a number of websites have the function of cutting pictures, perhaps you will feel that this 1 function dazzling gorgeous, mysterious! However, a plug-in jquery. Jcrop. min. js introduced today will unveil the mystery of picture cutting. Use of this plug-in can be very convenient to achieve this 1 function, use only the mouse in the picture circle selection, you can cut the picture into the selected part, very suitable for the avatar cutting editing function.

This example demonstration is divided into two parts: HTML and php:

Part 1, HTML code: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jcrop Achieve picture cropping </title>
<script src="./jquery-1.6.2.min.js"></script>
<script src="./jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="./jquery.Jcrop.min.css" rel="external nofollow" type="text/css" />
<style type="text/css">
#preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;}
#imghead{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
</style>
<script language="Javascript">
jQuery(function(){
 jQuery('#imghead').Jcrop({
 aspectRatio: 1,
 onSelect: updateCoords, // Execute the corresponding callback function when the area is selected 
 onChange: updateCoords, // Execute the corresponding callback function when the selection area changes 
 });
});
function updateCoords(c)
{
 jQuery('#x').val(c.x); // The upper left corner of the selected area is horizontal 
 jQuery('#y').val(c.y); // Upper left ordinate of selected area 
 //jQuery("#x2").val(c.x2); // Abscissa of the lower right corner of the selected area 
 //jQuery("#y2").val(c.y2); // The ordinate of the lower right corner of the selected area 
 jQuery('#w').val(c.w); // Width of selected area 
 jQuery('#h').val(c.h); // Height of selected area 
};
function checkCoords()
{
 if (parseInt(jQuery('#w').val())>0) return true;
 alert(' Please select the picture area to be cropped .');
 return false;
};
</script>
</head>
<body>
<img id="imghead" border=0 src='./image/b4.jpg' />
<form action="crop.php" method="post" onsubmit="return checkCoords();">
 <input type="text" id="x" name="x" />
 <input type="text" id="y" name="y" />
 <input type="text" id="w" name="w" />
 <input type="text" id="h" name="h" />
 <input type="submit" value=" Submit ">
</form>
</body>
</html>

Part 2: PHP Processing Section crop. php: 


<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
 $targ_w = $targ_h = 150;
 $jpeg_quality = 90;
 $src = './image/b4.jpg';
 $img_r = imagecreatefromjpeg($src);
 $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']);
 header('Content-type: image/jpeg');
 imagejpeg($dst_r,null,$jpeg_quality);
 exit;
}
?>

Supplement: jquery.Jcrop.min.js Download address of this site: https://www.ofstack.com/jiaoben/24768. html

Related articles: