Advanced Thumbnail Creator

7.1. Thumbcreate.js description.

//initialization
function init()
{
	document.getElementById("image").onclick=mouseHandler;
	document.getElementById("image").onmousemove=mouseHandler;
	document.getElementById('th_w').value=thumbWidth;
	document.getElementById('th_h').value=thumbHeight;
}

//mouse handler
function mouseHandler(mouseEvent)
{
	if (!mouseEvent) mouseEvent = window.event;
	if (mouseEvent.button == 2) return;
	var element = (mouseEvent.target)?mouseEvent.target:mouseEvent.srcElement;

//for a clique we begin to draw a selection rectangle
	if (mouseEvent.type=="click")
	{
	var x = mouseEvent.clientX - document.getElementById("image").offsetLeft;
	var at = mouseEvent.clientY - document.getElementById("image").offsetTop;
	pointSet(x,y);
	rectangleDraw('area');
	};

//draw the selection region during mouse motion
	if (mouseEvent.type=="mousemove")
	{
	.
	}
}

//setting coordinates for top left and right bottom corner
function pointSet(x,y)
{
	if (!ptype)
	{
	x1=x+document.body.scrollLeft;
	y1=y+document.body.scrollTop;
	rectangleHide('area');
	inputUpdate();
	}
	else
	{
	x2=x+document.body.scrollLeft;
	y2=y+document.body.scrollTop;
	pointCorrect();
	inputUpdate();
	}
	ptype = !ptype;
}

//correcting TL BR coordinates if they are switched
function pointCorrect(x1c,y1c,x2c,y2c)
{
	.
}

//rectangle drawing (x1,y1); (x2,y2)
function rectangleDraw(rectId)
{
	.
}

// rectangle drawing from input fields
function rectangleDrawInput(rectId)
{
.
}

//rectangle hiding
function rectangleHide(rectId)
{
	.
}

//input fields update functions
function inputUpdate()
{
.
}

function inputWidthUpdate()
{
	.
};

function inputHeightUpdate()
{
	.
};

function inputXYUpdate()
{
	.
};

//prepare for thumbnail generation
function generateImageThumb()
{
	var previewclass='preview';
	var previewimage='/preview.gif';	

	var links=document.getElementsByTagName('a');
	var prevlinks=new Array();
	var c=0;
	
	var previewTest = new RegExp("(^|\s)" + previewclass + "(\s|$)");

	for(I=0; I<links.length; I++)
	{
	if (previewTest.test(links[I].className))
	 prevlinks[c]=links[I]; c++; }
	}

	for(I=0; I<prevlinks.length; I++)
	{

	var newa=document.createElement('a');
	newa.style.textDecoration="none";

	var newbutton=document.createElement('input');
	newbutton.type="button";
	newbutton.value="Generate Thumbnail"

	newa.appendChild(newbutton);
	newa.href="#";

	var newbr=document.createElement('br');
	newa.appendChild(newbr);

	newa.onclick=function()
		{
	if(this.getElementsByTagName('img')[0])
	this.removeChild(this.getElementsByTagName('img')[0]);

	var newimg=document.createElement('img');
	newimg.style.border="0";
	newimg.vspace="10";
	this.appendChild(newimg);

	var rand=parseInt(1000*Math.random());
	newimg.src="?action=generate&r="+rand+"&x1="+document.getElementById('x1_inp').value+
	"&y1="+document.getElementById('y1_inp').value+"&x2="+document.getElementById('x2_inp').value+
	"&y2="+document.getElementById('y2_inp').value+"&w="+document.getElementById('th_w').value+
	"&h="+document.getElementById('th_h').value+"&fn="+document.getElementById('fileName').value;

	return false;
		}

	prevlinks[I].parentNode.insertBefore(newa,prevlinks[I].nextSibling);
	}

}	

//initialization
window.onload=function()
{
	init();
	generateImageThumb();
}

7.2. Thumbcreate.php functions description.

<?php
	if (!$_GET[thumbwidth]) $_GET[thumbwidth]=0;
	if (!$_GET[thumbheight]) $_GET[thumbheight]=0;

//thumbnail creation function
	function createthumb($new_w,$new_h,$x1,$y1,$x2,$y2,$fn)
	{
	$src_img=imagecreatefromjpeg($_GET['fn']);
	$dst_img=ImageCreateTrueColor($new_w,$new_h);
	imagecopyresampled($dst_img,$src_img,0,0,$x1,$y1,$new_w,$new_h,$x2-$x1,$y2-$y1); 

//output to browser
	imagejpeg($dst_img);
//output to file
	imagejpeg($dst_img,substr($_GET['fn'],0,-4)."_th.jpg"); 

	imagedestroy($dst_img); 
	imagedestroy($src_img); 
	}
	if ($_GET[action]=="generate")
	{
	header('Content-type:image/jpeg');
	createthumb($_GET['w'],$_GET['h'],$_GET['x1'],$_GET['y1'],$_GET['x2'],$_GET['y2'],$_GET['fn']);
	}
?>

//working area
<div id="image" style="cursor: crosshair; width:<?= $imgWidth ?>px; 
height:<?= $imgHeight ?>px; border-width:0; background-image: url('<?= $_GET[filename] ?>') ">
	<div id="area"></div>
</div>

//input-output form
<form action="" method="post">
<table width="<?=$imgWidth?>px">
	<tr>
	<td width="33%" align=center>
	TL (x1, y1) = (<input type="text" id="x1_inp" value="0" class="atc1" onChange="inputXYUpdate();">,
	<input type="text" id="y1_inp" value="0" class="atc1" onChange="inputXYUpdate();">)<br>
	BR (x2, y2) = (<input type="text" id="x2_inp" value="0" class="atc1" onChange="inputXYUpdate();">,
	<input type="text" id="y2_inp" value="0" class="atc1" onChange="inputXYUpdate();">)<br></td>
	<td width="33%" align=center>
	Width = 
	<input type="text" id="th_width" value="0" class="atc2" onChange="inputWidthUpdate();"><br>
	Height = 
	<input type="text" id="th_height" value="0" class="atc2" onChange="inputHeightUpdate();"><br></td>
	<td width="33%" align=center>
	Thumbnail width = <input type="text" id="th_w" value="" class="atc2"><br>
	Thumbnail height = <input type="text" id="th_h" value="" class="atc2"><br></td></tr>
	<tr><td colspan=3 align=center><BR><a href="/none.gif" class="preview"></a></td></tr>
</table><input type="hidden" value="<?= $fileInput ?>" id="fileName"></form>

Roman Onufryk

05 / 03 / 2007

Amazing! It's a great please to see professional maturity of friend.

Romper

05 / 03 / 2007

Great idea and nice implementation!

pcbrainbuster

08 / 03 / 2007

(its me from dynamicdrive) Nice script have to say very very advanced !!!

visiteur

20 / 03 / 2007

nice script. if there is any posibility - please make drag&drop

leon

24 / 04 / 2007

Nice script.