Tagliare immagini con PHP e jQuery

Oggi vediamo come tagliare facilmente un immagine (crop) in perfetto stile facebook usando il plugin jQuery Jcrop e un po’ di codice php. 

Potete scaricare il plugin Jcrop da questo sito.

Il codice è diviso in 3 pagine: index.phpcut.jscut.php, la prima di cui parleremo è cut.js, visto che contiene quasi tutto il funzionamento del programma e per certi versi è la più complessa.

var x, y, x2, y2, w, h, width, height; //varie variabili necessarie per il "taglio" dell'immagine
image = $("#jcrop"); //variabile che punta all'immagine
var search = image.attr("src"); //indirizzo dell'immagine

Come prima cosa creiamo le variabili necessarie per il funzionamento del codice, la variabile image punta all’immagine che verrà tagliata, come potete vedere ho deciso di identificarla con l’id jcrop, vedremo nella pagina index.php la struttura di questa, nella variabile search salveremo l’attributo src usando la funzione .attr.

image.Jcrop({

Da questo punto inizia il codice vero e proprio, richiamando la funzione Jcrop andremo ad applicare alla nostra immagine una simpatica area di ritaglio tipica dei programmi di grafica, un idea molto intelligente perché facile da usare e non stravolge l’utente finale mettendolo a confronto con qualcosa che è abituato a vedere.

onChange: function(target) {
	x = target.x;
	y = target.y;
	x2 = target.x2;
	y2 = target.y2;
	w = target.w;
	h = target.h;

	$("#x").html("x: "+x);
	$("#y").html("y: "+y);
	$("#x2").html("x2: "+x2);
	$("#y2").html("y2: "+y2);
	$("#w").html("width: "+w);
	$("#h").html("height: "+h);

},

l’evento onChange viene chiamato ogni volta che modifichiamo la selezione, tramite la dichiarazione della variabile target andiamo a recuperare tutti i dati che ci aspettiamo di avere, gli assi sul piano cartesiano che corrispondono alla nostra attuale selezione, la larghezza e l’altezza di questa.

Successivamente mostriamo a schermo questi dati utilizzando la funzione .html, gli elementi che conterranno questi dati saranno spiegati quando parleremo della pagina index.php.

onSelect: function(target) {
	x = target.x;
	y = target.y;
	x2 = target.x2;
	y2 = target.y2;
	w = target.w;
	h = target.h;
					},

L’evento onSelect viene chiamato ogni volta che finiamo di modificare la selezione, il codice che viene eseguito è lo stesso dell’evento onChange ma non mostra i dati.

setSelect: [0,0,9999,9999]

L’evento setSelect viene chiamato durante il caricamento dell’immagine settando l’inizio della selezione tramite le coordinate x e y, nel nostro caso 0,0 e la larghezza e altezza di questa, ho inserito 9999 per far si che la selezione ricopra tutta l’immagine.

$("#resize").click(function() {
		window.location.replace("cut.php?src="+search+"&x="+x+"&y="+y+"&w="+w+"&h="+h);
	}
})

Qusta funzione viene chiamata ogni volta che un bottone con id resize viene cliccato, verremo reindirizzati alla pagina cut.php a cui passeremo tutte le variabili tramite il metodo _GET di php.

Ora andiamo ad analizzare la pagina cut.php.

$src = $_GET['src'];
$x = $_GET['x'];
$y = $_GET['y'];
$w = $_GET['w'];
$h = $_GET['h'];

$path = pathinfo($_GET['src']);
$ext = $path['extension'];
$name = $path['filename'];
$name = $name."_resized.".$ext;

Rinominiamo tutte le variabili che abbiamo passato in precedenza tramite il metodo _GET, e successivamente recuperiamo l’estensione e il nome del file tramite la funzione pathinfo, con queste creeremo il nome dell’immagine dopo il taglio la quale avrà questa struttura: nome_resized.estensione.

if ($ext == "jpg") {

	$image = imagecreatefromjpeg($src);

	$crop = imagecreatetruecolor($w,$h);

	imagecopy ( $crop, $image, 0, 0, $x, $y, $w, $h );

	imagejpeg($crop,$name);

}

Viene controllata l’estensione dell’immagine così da usare le opportune funzioni, infatti php ha differenti funzioni per la modifica di un immagine che variano appunto a seconda dell’estensione, nel caso mostrato “jpg” le funzioni sono imagecreatefromjpeg imagejpeg, ma la funzione principale è imagecopy che come potete richiede molti dati, andiamo ad analizzarla in modo più approfondito:
Il primo parametro è l’immagine principale su cui lavorerà la funzione, nel nostro caso un immagine trasparente larga e alta h px, il secondo è l’immagine che vogliamo copiare sopra la prima, successivamente ci sono le coordinate dell’immagine di base, ovviamente metteremo 0 alla x e 0 alla y, tutte quelle successive servono per la selezione della parte da copiare, per una maggiore comprensione della funzione consiglio la visita di questa pagina.

if ($ext == "jpg") {

	$image = imagecreatefromjpeg($src);

	$crop = imagecreatetruecolor($w,$h);

	imagecopy ( $crop, $image, 0, 0, $x, $y, $w, $h );

	imagejpeg($crop,$name);

} elseif ($ext == "jpeg") {

	$image = @imagecreatefromjpeg($src);

	$crop = @imagecreatetruecolor($w,$h);

	imagecopy ( $crop, $image, 0, 0, $x, $y, $w, $h );

	@imagejpeg($crop,$name);

} elseif ($ext == "png") {

	$image = @imagecreatefrompng($src);

	$crop = @imagecreatetruecolor($w,$h);

	imagecopy ( $crop, $image, 0, 0, $x, $y, $w, $h );

	@imagepng($crop,$name);

} elseif ($ext == "gif") {

	$image = @imagecreatefromgif($src);

	$crop = @imagecreatetruecolor($w,$h);

	imagecopy ( $crop, $image, 0, 0, $x, $y, $w, $h );

	@imagegif($crop,$name);

}

Facciamo la stessa operazione per tutte le estensioni possibile jpg, jpegpnggif.

header("location: ".$name);

Alla fine effettuiamo un reindirizzamento all’immagine tagliata.

Finalmente Parliamo della pagina index.php, naturalmente non la analizzerò tutta ma solo le parti che ci interessano

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

Includiamo tutte le pagine necessarie per il funzionamento del programma, cut.js e tutti i file di Jcrop.

<img id="jcrop" src="<?php echo $_GET['image']; ?>" />

Questa è la tanto nominata immagine, come potete vedere l’id che gli è stato dato è jcrop, ho optato per una variabile _GET per il recupero dell’indirizzo dell’immagine da tagliare, naturalmente potete utilizzare qualsiasi altro metodo.

<table width="100%" style="text-align: center">
	<tr>
		<td width="33%" id="x"></td>
		<td width="33%" id="x2"></td>
		<td width="34%" id="w"></td>
	</tr>
	<tr>
		<td id="y"></td>
		<td id="y2"></td>
		<td id="h"></td>
	</tr>
	<tr>
		<td colspan="3">
			<input type="button" value="taglia" id="resize" />
		</td>
	</tr>
</table>

Ho creato una tabella per l’inserimento delle informazioni relative alla nostra selezione, come visto nella spiegazione della pagina cut.js ad ogni id corrisponde un dato, il codice si conclude con il bottone resize che finalmente reindirizza alla pagina cut.php.

Questa ultima parte è stata spiegata molto velocemente perché secondo me non c’era niente da spiegare ad eccezione del perché certi elementi si trovavano li, se mi potete far passare questa frase.

Riepilogo completo

index.php

<html>
	<head>
		<title>taglia immagine</title>
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.Jcrop.min.js"></script>
		<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
		<link rel="stylesheet" href="main.css" type="text/css" />
		<script src="cut.js"></script>
	</head>

	<body>
		<div id="jcrop_container">
			<img id="jcrop" src="<?php echo $_GET['image']; ?>" />
		</div>
	</div>
	<div id="info">
			<table width="100%" style="text-align: center">
				<tr>
					<td width="33%" id="x"></td>
					<td width="33%" id="x2"></td>
					<td width="34%" id="w"></td>
				</tr>
				<tr>
					<td id="y"></td>
					<td id="y2"></td>
					<td id="h"></td>
				</tr>
				<tr>
					<td colspan="3">
						<input type="button" value="taglia" id="resize" />
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

cut.js

$(document).ready(function() {
	var x, y, x2, y2, w, h, width, height; //varie variabili necessarie per il "taglio" dell'immagine
	image = $("#jcrop"); //variabile che punta all'immagine
	var search = image.attr("src"); //indirizzo dell'immagine
	image.Jcrop({
		onChange: function(target) {
			x = target.x;
			y = target.y;
			x2 = target.x2;
			y2 = target.y2;
			w = target.w;
			h = target.h;

			$("#x").html("x: "+x);
			$("#y").html("y: "+y);
			$("#x2").html("x2: "+x2);
			$("#y2").html("y2: "+y2);
			$("#w").html("width: "+w);
			$("#h").html("height: "+h);

		},

		onSelect: function(target) {
			x = target.x;
			y = target.y;
			x2 = target.x2;
			y2 = target.y2;
			w = target.w;
			h = target.h;

		},

		setSelect: [0,0,9999,9999]
	})

	$("#resize").click(function() {
		window.location.replace("cut.php?src="+search+"&x="+x+"&y="+y+"&w="+w+"&h="+h);
	})
})

cut.php

<?php
	$src = $_GET['src'];
	$x = $_GET['x'];
	$y = $_GET['y'];
	$w = $_GET['w'];
	$h = $_GET['h'];

	$path = pathinfo($_GET['src']);
	$ext = $path['extension'];
	$name = $path['filename'];
	$name = $name."_resized.".$ext;

	if ($ext == "jpg") {

		$image = imagecreatefromjpeg($src);

		$crop = imagecreatetruecolor($w,$h);

		imagecopy ( $crop, $image, 0, 0, $x, $y, $w, $h );

		imagejpeg($crop,$name);

	} elseif ($ext == "jpeg") {

		$image = @imagecreatefromjpeg($src);

		$crop = @imagecreatetruecolor($w,$h);

		imagecopy ( $crop, $image, 0, 0, $x, $y, $w, $h );

		@imagejpeg($crop,$name);

	} elseif ($ext == "png") {

		$image = @imagecreatefrompng($src);

		$crop = @imagecreatetruecolor($w,$h);

		imagecopy ( $crop, $image, 0, 0, $x, $y, $w, $h );

		@imagepng($crop,$name);

	} elseif ($ext == "gif") {

		$image = @imagecreatefromgif($src);

		$crop = @imagecreatetruecolor($w,$h);

		imagecopy ( $crop, $image, 0, 0, $x, $y, $w, $h );

		@imagegif($crop,$name);

	}

	header("location: ".$name);
?>

Conclusioni e download

Come sempre ecco il link per scaricare il tutorial completo con un esempio funzionante.

[viral-download file1=”http://www.targetweb.it/download/2013/jcrop.rar” name1=”Scarica lo script!” url=”http://www.targetweb.it/tagliare-immagini-con-php-e-jquery/” message=”Per scaricare il file completo devi condividere l’articolo su un social network. ” tweet=”Tagliare immagini con PHP e jQuery #php #jquery” thankyou=”Grazie per aver condiviso, clicca sul link qui sotto:”/]

Come avete potuto vedere il codice è un po lungo ma abbastanza semplice, spero che l’articolo vi sia stato di aiuto, non dimenticate di commentare scrivendo vostri pareri o domande e di condividere l’articolo sui tuoi social network preferiti!.

          1. Salve vorrei sapere dopo che ho ritagliato l’immagine come faccio a caricarla sul server?

  1. Ottimo tutorial, anche perché precedentemente ho già utilizzato jCrop ma ho fatto un bel casotto nel codice… Così invece mi sembra molto lineare e pratico….
    Una domanda Marco…
    In questo caso, l’utente può ritagliare le immagini selezionando l,immagine e definendo una grandezza dell’area di ritaglio a piacere ….
    Nel caso in cui si volesse fissare l’area di ritaglio ad una determinata altezza e larghezza? É possibile vincolare il ritaglio in questo modo?
    Mi spiego meglio….
    Prendiamo l’immagine di copertina di fb… So per certo che l’immagine finale sará ad esempio un 700×250 px….
    Quindi in questo caso dovrei far apparire un area di selezione giá di queste misure, facendogli scegliere solo quale parte di img ritagliare…
    É possibile farlo? Sai descrivere come?
    Grazie comunque per questo utilissimo post…. 😉

    1. Ti rispondo io:
      Basta che usi 3 funzioni di jcrop
      maxSize, minSize e setSelect.
      metti maxSize uguale a minSize e se necessario con setSelect definisci le coordinate di partenza della selezione

      esempio:
      maxSize[50,50],
      minSize[50,50],
      setSelect[10,10,50,50]

  2. Riccardo, utilizzando ormai facilmento questo script grazie al tuo post e anche agli interventi di Giacomo, mi é venuta una idea in mente…
    Metti il caso che io voglia caricare una o piu immagini con il “multiple” di html5…. Come si potrebbe fare in modo che le mie tot immagini caricate siano visualizzate tutte nella stessa pagina, dalle quale le ritaglio una a una delle dimensioni che voglio….
    Mi spiego meglio….
    Ho uno slider di immagini in front end, diciamo di dimensioni 960×250…
    Vorrei dare la possibilitá al cliente, tramite admin di caricare le img a sua discrezione ma invece caricarne una volta e poi tagliare la parte che lui vuole, caricarle rutte Insieme tramite multiple e poi… Selezionare per ognuna l area desiderata…

  3. Molto utile! Ma volevo sapere se c’era in modo per definire un aspect-ratio a priori di cui l’utente può modificare solo le dimensioni e la posizione

  4. Ciao e grazie del tutorial!
    Una domanda: è possibile effettuare un “crop circolare” dell’immagine ?
    Grazie

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

wp-plugin-table-raccolta-plugin-utili-per-wordpress
Up Next:

Wp Plugin Table - raccolta plugin utili per Wordpress

Wp Plugin Table - raccolta plugin utili per Wordpress