Corsi on-line

Ritagliare immagini con jQuery e PHP

Oggi vi segnalo un plugin per jQuery che ritengo piuttosto interessante. Il plugin in questione si chiama jCrop e consente di effettuare la selezione dinamica di un’area di un’immagine per poi effettuarne il cropping (esattamente come avviene nei comuni software di grafica come, ad esempio, Photoshop).

L’utilità di questo plugin appare evidente soprattutto se lo si utilizza in combinazione con PHP: mediante il lavoro combinato di jCrop e del giusto codice PHP (o altro linguaggio lato server in grado di manipolare le immagini) è, infatti, possibile creare utilità accattivanti: ad esempio è possibile consentire all’utente di caricare una foto da cui ritagliare un dettaglio (di cui è possibile vincolare le dimensioni o le proporzioni) da utilizzare come avatar.

La logica di questa interazione è piuttosto semplice: jCrop, infatti, è in grado di rilevare le coordinate della selezione effettuata dall’utente; tali coordinate dovranno essere passate al file PHP che effettuerà materialmente il ritaglio dell’immagine.
Questo il codice – leggermente modificato e commentato – dell’esempio fornito con jCrop:

<?php
// URL del file sorgente (immagine originale)
$imgsrc = 'demo_files/flowers.jpg';

if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
  // imposto larhezza ed altezza dell'immagine ritagliata
  $targ_w = $targ_h = 150;	
  // imposto la qualità dell'output
  $jpeg_quality = 90;
  // creo l'immagine sorgente
  $img_r = imagecreatefromjpeg($imgsrc);	
  // creo la nuova immagine delle dimensioni specificate
  $dst_r = ImageCreateTrueColor($targ_w, $targ_h);
  // creo una copia dell'immagine sorgente opportunamente ritagliata
  imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],$targ_w,$targ_h,$_POST['w'],$_POST['h']);
  // stampo a video l'output
  header('Content-type: image/jpeg');
  imagejpeg($dst_r,null,$jpeg_quality);
  exit;
}
?>
<html>
<head>
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<script language="Javascript">
$(function(){
  // inizializzo Jcrop
  $('#cropbox').Jcrop({
    // proporzioni quadrate
    aspectRatio: 1,
    // alla selezione aggiorno le coordinate nel form
    onSelect: updateCoords
  });
});

// funzione per l'aggiornamento delle coordinate
function updateCoords(c) {
  $('#x').val(c.x);
  $('#y').val(c.y);
  $('#w').val(c.w);
  $('#h').val(c.h);
}

// funzione di controllo
function checkCoords() {
  if (parseInt($('#w').val())) return true;
  else{
    alert('Please select a crop region then press submit.');
    return false;
  }
}
</script>
</head>
<body>

<div><img src="<?php echo $imgsrc; ?>" id="cropbox" /></div>
<div>
<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="submit" value="Crop Image" />
</form>
</div>
	
</body>
</html>

Alla pagina ufficiale del progetto è possibile accedere alla documentazione ed a diversi demo che mostrano jCrop all’opera.

Post correlati
  • L’ho usato… Molto carino!

  • Anonimo

    volevo sapere: ci vogliono le librerie gd attive?

  • Anonimo

    Sì, servono le GD altrimenti PHP non riesce a fare il suo lavoro

  • se volessi impostare il ritaglio minimo 100px x 100px?

  • Enrico Nibale

    Potreste spiegarmi meglio questo passaggio??
    // imposto larhezza ed altezza dell’immagine ritagliata  $targ_w = $targ_h = 150;
    di che immagine parla? dell’originale che poi deve ritagliare?

  • Giuseppe

    complimenti per la guida…volevo chiederti se invece di stampare a video la parte ritagliata volessi salvarla come immagine in una cartella…potresti dirmi come potrei fare grazie ed ancora complimenti

I più letti del mese
Tematiche