Ritaglio di immagini con JQuery e PHP

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.

jquery-ritaglio

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" />
&amp;lt;/form&amp;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' />";
}

?>

 

Lascia un commento