PHP:Jquery: Image Crop Thumbnail (JCrop)

Kullanıcıların profil resimlerini diledikleri ölçüde kesip küçültmelerini sağlayacak bir uygulama geliştirelim. Bir Jquery eklentisi olan Jcrop ile bu işlemi çok pratik bir şekilde yapabiliyoruz.

Uygulama için basit bir index.html dosyası oluşturuyoruz.

index.html


<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

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

<script language="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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>

<div id="outer">
<div>
<div>

<h1>Serpito.com - JCrop Demo</h1>

<!-- This is the image we're attaching Jcrop to -->
<img src="antalya.jpg" id="cropbox" />

<!-- This is the form that our event handler fills -->
<form action="crop.php" 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" />
<input type="hidden" id="res" name="res" value="antalya.jpg" />

<input type="submit" value="Resimi Kes" />
</form>

</div>
</div>
</div>

</body>

</html>

&nbsp;

&nbsp;

Hidden inputlardan oluşan formun submit edildiğinde veri göndereceği crop.php dosyasını kodlayalım.

crop.php


<?php
error_reporting(E_ERROR);
//print_r($_POST);
$targ_w = $_POST&#91;'w'&#93;-$_POST&#91;'x'&#93;;
$targ_h = $_POST&#91;'h'&#93;-$_POST&#91;'y'&#93;;

$jpeg_quality = 90;

$src = $_POST&#91;'res'&#93;;
$s=explode(".",$_POST&#91;'res'&#93;);
$resim=$s&#91;0&#93;; //resimin ismini aliyoruz

$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

imagecopyresampled($dst_r,$img_r,0,0,$_POST&#91;'x'&#93;,$_POST&#91;'y'&#93;,$targ_w,$targ_h,$_POST&#91;'w'&#93;,$_POST&#91;'h'&#93;);

header('Content-type: image/jpeg');
imagejpeg($dst_r, "image/".$resim."_thumb.jpg", $jpeg_quality);

?>]

&amp;nbsp;

crop.php ye gönderilen resim üzerindeki kesim noktalarının kordinatları ve x-y uzunlukları crop.php dosyasında imagecopyresampled fonksiyonu tarafından işleniyor.

Yukarıdaki görselde denediğim uygulamanın sonucunda images dizininde antalya_thumb.jpg resimini aşağıda görebilirsiniz.