Decupăm imagini cu Jcrop (şi PHP)


Vă amintiţi că acum câteva zile am scris despre PHP şi lucrul pe imagini? Spuneam atunci că folosind librăria GD putem să facem unele minime manipulări de imagini. Cum s-ar putea face oare decuparea? Funcţia imagecopyresampled ne permite să indicăm o porţiune dintr-o imagine, dar cum s-ar putea indica elegant cele două puncte ce „trasează” dreptunghiul de decupare? Am putea să facem un formular şi navigatorul să scrie nişte cifre… brrr… oribil. Sau am putea folosi ceva scripturi pentru a face selecţia mai… naturală.

Ce înţeleg prin „naturală”? În primul rând să o faci cu mouse-ul, nu indicând coordonatele cu cifre. Apoi selecţia să fie modificabilă (adică după ce ai trasat un prim dreptunghi să poţi reveni asupra lui, lăţindu-l sau lungindu-l). Să poţi muta selecţia (trăgând-o cu mouse-ul). Să ai evidenţiată selecţia (restul fiind mai întunecat). Sunt câteva pluginuri jQuery ce permit aşa ceva, iar unul nou şi – după mine – reuşit este Jcrop. O demonstraţie personală găsiţi aici iar codul pe care l-am folosit este mai jos. Între liniile 2 şi 13 avem codul PHP după submiterea formularului. Se ia imaginea originală, se iau coordonatele de început şi dimensiunile selecţiei şi se foloseşte funcţia PHP amintită. Simplu! Cât despre partea HTML, avem un formular în care câmpurile pentru punctul (x,y) de început şi lăţimea şi înălţimea selecţiei sunt ascunse. Ele primesc valoare prin scriptul Jcrop. În liniile 21-27 definim partea de decupare, dând coordonatele iniţiale, culoarea de întunecare, gradul de întunecare (în exteriorul selecţiei) şi funcţia care să fie apelată la modificarea valorilor. Astfel, în orice clipă, câmpurile formularului vor avea valorile corecte. Simplu, nu? Doar câteva linii şi avem o pagină elegantă pentru decuparea dintr-o imagine. Studiind documentaţia Jcrop vom afla cum putem forţa selecţii pătrate sau configura (via CSS) marcajul.

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
	$jpeg_quality = 90;
	$src = 'imagine-demo.jpg';
	$img_r = imagecreatefromjpeg($src);
	$dst_r = ImageCreateTrueColor( $_POST['w'],$_POST['h'] );
	imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
	$_POST['w'],$_POST['h'],$_POST['w'],$_POST['h']);
	header('Content-type: image/jpeg');
	imagejpeg($dst_r,null,$jpeg_quality);
	exit;
}
?><html>
<head>
<script src="jquery.pack.js"></script>
<script src="jquery.Jcrop.pack.js"></script>
<link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" />
<script language="Javascript">
	jQuery(function(){
		jQuery('#cropbox').Jcrop({
			setSelect: [ 20, 130, 480, 230 ],
			bgColor: 'blue',
			bgOpacity: .6,
			sideHandles: false,
			onSelect: updateCoords
		});
	});
	function updateCoords(c){
		jQuery('#x').val(c.x);
		jQuery('#y').val(c.y);
		jQuery('#w').val(c.w);
		jQuery('#h').val(c.h);
	};
	function checkCoords(){
		if (parseInt(jQuery('#w').val()) && parseInt(jQuery('#h').val())) return true;
		alert('Selectati o regiune apoi apasati butonul Decupare.');
		return false;
	};
</script>
</head>
<body>
<h1>Decupare cu Jcrop</h1>
<img src="imagine-demo.jpg" id="cropbox" />
<form action="decupare.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="submit" value="Decupare" />
</form>
<p>Selectati o portiune din imagine si apasati butonul Decupare.</p>
</body>
</html>

PS: Dacă tot veţi merge pe situl autorului scriptului Jcrop, vedeţi şi celelalte scripturi jQuery pe care le-a scris. De exemplu Appendo arată de asemenea bine şi poate fi util în diverse situaţii.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *