Merhabalar; Bu makalede Jquery ile görselleri kroplamayı kolaylaştıran Jcrop adlı eklenti kullanmayı öğreneceğiz. Hazırsak başlayalım:

Öncelikle jQuery Jcrop eklentisini indirin ve gerekli dosyaları HTML kodunuzun head bölümüne ekleyin.

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

Aşağıdaki HTML kodu, bir görüntü dosyası alarak ve görüntüyü kırpmak ve çıktı kırpılmış görüntüyü başka bir HTML "div" içinde göstermek için bir "Görüntüyü Kırp" düğmesi vererek Jcrop eklentisini gösterir.

<!DOCTYPE html> 
<html> 
<head> 
	<!-- All the required libraries to crop the image-->
	<link rel="stylesheet" href="jquery.Jcrop.min.css" type="text/css" /> 
	<script src="jquery.min.js"></script> 
	<script src="jquery.Jcrop.min.js"></script> 

	<style> 
		body { 
			width: 500px; 
			height: 380px; 
			font-family: Arial, Sans-serif; 
		} 

		.btnSubmitClass { 
			background-color: #696969; 
			padding: 5px 30px; 
			border: #696969 1px solid; 
			border-radius: 4px; 
			color: #FFFFFF; 
			margin-top: 10px; 
		} 

		input#cropBtnID { 
			padding: 5px 25px 5px 25px; 
			background: #D3D3D3; 
			border: #98b398 1px solid; 
			color: #FFF; 
			visibility: hidden; 
		} 

		#outputImage { 
			margin-top: 40px; 
		} 
	</style> 
</head> 

<body> 
	<h2> 
		How to crop image using  jQuery and PHP 
	</h2> 

	<div> 
		<img src="gfg2.jpg" id="cropImageID" class="img" /><br /> 
	</div> 
	<div id="btn"> 
		<input type='button' id="cropBtnID" value='Crop Image'> 
	</div> 
	<div> 
		<img src="#" id="outputImage" style="display:none;"> 
	</div> 
	<script type="text/javascript"> 
		$(document).ready(function () { 
			var size; 
			$('#cropImageID').Jcrop({ 

				/* Some settings for  basic configuration*/ 
				allowSelect: true, 
				allowMove: true, 
				allowResize: true, 
				fixedSupport: true, 
				aspectRatio: 1, 
				onSelect: function (c) { 
					size = { x: c.x, y: c.y, 
							w: c.w, h: c.h }; 

					$("#cropBtnID").css( 
						"visibility", "visible"); 
				} //end onSelect 
			}); //end Jcrop method 

			$("#cropBtnID").click(function () { 
				var img = $("#cropImageID").attr('src'); 
				$("#outputImage").show(); 
				
				$("#outputImage").attr('src', 
					'image-features.php?x = ' + 
					size.x + ' & y=' + size.y + 
					' & w=' + size.w + '&h=' + 
					size.h + '&img=' + img); 
			}); 
		});//end document ready fn 
	</script> 
</body> 
</html>

PHP kodu: Aşağıdaki PHP kodu, yukarıdaki HTML kodunda görüntü ve renk oluşturma için kullanılan "image-features.php" dosyasını uygular. Yeni bir görüntü oluşturmak için kullanılan PHP işlevi, imagecreatefromjpeg() yöntemidir. PHP imagecreatetruecolor() yöntemi kullanılarak yeni bir gerçek renkli görüntü oluşturulur . Kullanılan diğer PHP fonksiyonları ise imagecopyresampled() ve imagejpeg()'dir.

<?php 
  
// Create a new image from a file 
$newImage = imagecreatefromjpeg($_GET['img']); 
  
// Create a new true color image 
$newTruecolorImage = imagecreatetruecolor( 
            $_GET['w'], $_GET['h']); 
  
// Copy a portion from one image to another 
imagecopyresampled($newTruecolorImage,  
        $newImage, 0, 0, $_GET['x'], $_GET['y'],  
        $_GET['w'], $_GET['h'], $_GET['w'],  
        $_GET['h']); 
     
header('Content-type: image/jpeg'); 
  
// Display image to browser as output 
imagejpeg($newTruecolorImage); 
    
exit; 
?>

Tüm işlemler bu kadar siz PHP yerine ilgilendiğiniz herhangi bir backend ilede aynı işlemleri yapabilirsiniz.