Ci capita spesso nello sviluppo di pagine web, di dover ritagliare le immagini e quindi selezionare la parte che riteniamo rilevante prima di caricarla. Con l’utilizzo di JQuery e i relativi plugin disponibili, il ritaglio delle immagini puo’ essere fatto in maniera semplice e rapida evitando di ricorrere all’uso di programmi di grafica con conseguente perdita di tempo.
In questo articolo utilizzando il plugin per JQuery imgAreaSelect vediamo come ritagliare un’area selezionata da un’immagine che inviamo al server per la visualizzazione.:
Passiamo subito all’esempio pratico creando la pagina html:
index.html
<!DOCTYPE html>; <html> <head> <title>Ritaglio immagini con JQuery</title> <script type="text/javascript" src="js/ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.imgareaselect.pack.js"></script> <script> function updateCoords(i, e) { $('#x').val(e.x1); $('#y').val(e.y1); $('#w').val(e.width); $('#h').val(e.height); } $(document).ready(function() { var p = $("#preview"); $('img#preview').imgAreaSelect({ aspectRatio: '1:1', onSelectEnd: updateCoords }); }); function readURL(input) { var prev = $("#preview"); prev.fadeOut(); reader = new FileReader(); reader.readAsDataURL(input.files[0]); reader.onload = function (e) { prev.attr('src', e.target.result).fadeIn(); }; } function checkCrop() { val_w=$('#w').val(); if(val_w=='') { alert("Non hai selezionato l'area da ritagliare!"); return false; } } </script> </head> <body> <div> <h1>Ritaglio immagini con JQuery</h1> <img id="preview" style="display:none" /> <form action="crop.php" method="post" onsubmit="return checkCrop();"> <input id="upload_image" type="file" name="image" onchange="readURL(this);" /> <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="Ritaglia" name="submit" /> &lt;/form&gt; </div> </body> </html>
Una volta che abbiamo selezionato l’area dall’immagine premendo il tasto “Ritaglia”, inviamo i dati alla pagina ritaglio.php che ci permette di visualizzare l’anteprima dell’area ritagliata:
ritaglio.php
<?php $newwidth=250; $newheight=250; if (isset($_POST['submit'])){ $path = "upload/".$_FILES['image']['name']; $x = $_POST['x']; $y = $_POST['y']; $w = $_POST['w']; $h = $_POST['h']; $data = file_get_contents($_FILES['image']['tmp_name']); $source = imagecreatefromstring($data); $th = imagecreatetruecolor($newwidth, $newheight); // imagecopyresampled($dstImg, $vImg, 0, 0, $x, $y, $nw, $nh, $w, $h); imagecopyresized($th, $source, 0, 0, $x, $y, $newwidth, $newheight, $w, $h); imagejpeg($th, $path); imagedestroy($th); echo "<img src='$path' />"; } ?>