Fare hareketleri ile resimlerinin istenilen konuma getirilmesini sağlamak için kullanacağımız resim görüntüleme sayfası ve resimlerin kaydırılırken aldığı koordinat bilgilerinin elde edilerek resim işlemek için gönderileceği sayfanın kodlarını aşağıda verim.Kodlarda js ve form bilgileri bulunmaktadır.

Cerceve.php

<style>
.surukle{position:absolute;}
#resimler{position:absolute;width:404px;height:285px;top:120px
;left:120px;border:1px solid gray;}
</style>
<script language="JavaScript1.2">
<!--

var ie=document.all;
var nn6=document.getElementById&&!document.all;

var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{
  if (isdrag)
  {
    dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
    dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
    if(dobj.id=="res1"){
document.getElementById("koordinat1").value=dobj.style.left+dobj.style.top;
}
if(dobj.id=="res2"){
document.getElementById("koordinat2").value=dobj.style.left+dobj.style.top;
}
if(dobj.id=="res3"){
document.getElementById("koordinat3").value=dobj.style.left+dobj.style.top;
}
    return false;
  }
}

function selectmouse(e)
{
  var fobj       = nn6 ? e.target : event.srcElement;
  var topelement = nn6 ? "HTML" : "BODY";

  while (fobj.tagName != topelement && fobj.className != "surukle")
  {
    fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  }

  if (fobj.className=="surukle")
  {
    isdrag = true;
    dobj = fobj;
    tx = parseInt(dobj.style.left+0);
    ty = parseInt(dobj.style.top+0);
    x = nn6 ? e.clientX : event.clientX;
    y = nn6 ? e.clientY : event.clientY;
    document.onmousemove=movemouse;
    return false;
  }
}

document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
</script>
<form method="post" action="cerceve2.php">
	<input type="text" id="koordinat1" name="koordinat1"><br/>
	<input type="text" id="koordinat2" name="koordinat2"><br/>
	<input type="submit">
</form>
<div id="resimler">
<img src="zeynep-ceren.jpg" id="res1" class="surukle" />
<img src="cerceve.png" id="res2" class="surukle" />
</div>
Cerceve2.php

Resimlerin montajını yapan php programımızda 2 önemli detayımız bulunmakta.Bunlarda birisi çerçevenin genişlik ile yükseklik değerleri.Bu değerleri php programına yazıyoruz.

$width = 400;
$height = 283;
Genişlik ve yükseklik değerlerimiz çerçevenin sınırlarıdır.Bu nedenle küçük değerler girilirse çerçeve o oranda kesintiye uğrar.Bu kesintinin nedeni imagecopyresampled() fonksiyonun aldığı genişlik ve yükselik değerine göre yeniden resmi boyutlandırmasından ve gerekli kaynağı yenilemesinden kaynaklanır.Kısaca eğer belli bölgelerin kesintiye uğramasını istiyorsak yeni genişlik ve yükseklik değerlerinin girilmesi gerekir.

İkinci önemli detayımız form ile birlikte gönderilen resimlerin koordinat bilgileridir.Biz örnek uygulamamızda iki resim kullandığımızdan gelen koordinat bilgileri de 2 koordinat adıyla programa POST metodu ile ulaşacaktır.Formlarda koordinat adlarını koordinat1 ve koordinat2 olarak düzenlediğimiz için bu 2 form adına bağlı değerleri $_POST['koordinat'.$i]); ile bir döngü içinde $i değişkenin alacağı değişken numaralarla elde edebiliriz.Normalde aslında buna gerek yok fakat ikiden fazla grafik ile çalıştığımızda bunların hatasız ve daha kolay bir şekilde elde edilmesi için gerekli bir düzenlemedir.

<?php
$width 	= 400;
$height = 283;
$parts  = array("zeynep-ceren.jpg","cerceve.png");
#50,150,200
#150,50,100
$kon  = array();
$kon2  = array();

for($i=1;$i<=2;$i++){
list($w,$x)=explode("px",$_POST['koordinat'.$i]);
if(!$w) $w=0; if(!$x) $x=0;
$koor[]=$w;
$koor2[]=$x;
}
Eğer resimlerin arka planları renkleri ile ilgili bir değişiklik istiyorsak bu durumda program içine ek bir seçenek koydum.Bunu arkaplan_renk değişkenine verebileceğimiz bir hex renk kodu ile sağlayabiliriz.

$background = imagecreatetruecolor($width, $height);
$background_source='#FFFFFF'; //istenilen herhangi bir hex renk kodu yazılabilir.
$int = hexdec(str_replace("#", "", $background_source));

$background_color = imagecolorallocate ($background, 0xFF &
($int >> 0x10), 0xFF & ($int >> 0x8), 0xFF & $int);
imagefill($background, 0,0,$background_color);
$canvas = imagecreatetruecolor($width, $height);
if($background)
{
imagecopyresampled($canvas, $background, 0,0,0,0,$width, $height,
$width, $height);
}

for($i=0; $i<count($parts); $i++)
{
list($part_w, $part_h) = getimagesize($parts[$i]);
if($i==0){
 $body_part = imagecreatefromjpeg($parts[$i]);
}
if($i==1){
 $body_part = imagecreatefrompng($parts[$i]);
imageAlphaBlending($body_part, true);
imageSaveAlpha($body_part, true);
}
$sombra = imagecolorallocatealpha($body_part,0,0,0,99);
imagecopyresampled($canvas, $body_part,$koor[$i],$koor2[$i],0,0,$part_w,
$part_h, $part_w, $part_h);

}

header("content-type: image/jpeg");
imagejpeg($canvas, "", 100);
?>
Kullanılan resimler için;

Hotfile.com: One click file hosting