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>
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['w']-$_POST['x'];
$targ_h = $_POST['h']-$_POST['y'];
$jpeg_quality = 90;
$src = $_POST['res'];
$s=explode(".",$_POST['res']);
$resim=$s[0]; //resimin ismini aliyoruz
$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, "image/".$resim."_thumb.jpg", $jpeg_quality);
?>]
&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.
Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.
3 Comments
resim döndürmeyi nasıl yapabiliriz jquery den
kardeş paylaşım teşekkürlerde zip dosyasındaki dosya çalışmıyor.image klasörüne Dosya izinleri falan verdim crop yapmıyor.
Teşekkürler faydalı bir çalışma