index.php:
<form method="post" action="crop.php" enctype="multipart/form-data">
Subir foto: <input type="file" name="foto">
<br>
<input type="submit" value="SUBIR FOTO">
</form>
crop.php:
<?php
if (isset($_FILES['foto']['tmp_name'])) {
if (is_uploaded_file($_FILES['foto']['tmp_name'])) { // si en el File se ha puesto algo
$fich_final = $_FILES['foto']['name'];
copy($_FILES['foto']['tmp_name'], 'imagenes/'.$fich_final);
$src = 'imagenes/'.$fich_final;
}
}
if (isset($_POST['x'])) {
$targ_w = $targ_h = 150;
$jpeg_quality = 90;
$img_r = imagecreatefromjpeg($_POST["src"]);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);
header('Content-type: image/jpeg');
$azar = rand(1,9999);
imagejpeg($dst_r, 'imagenes/mini_'.$azar.'.jpg',$jpeg_quality);
exit;
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<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 type="text/javascript">
$(function(){
$('#cropbox').Jcrop({
aspectRatio: 1,
onSelect: updateCoords
});
});
function updateCoords(c) {
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
}
function checkCoords() {
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
}
</script>
<style type="text/css">
#target {
background-color: #ccc;
width: 500px;
height: 330px;
font-size: 24px;
display: block;
}
</style>
</head>
<body>
<div class="jc-demo-box">
<img src="<?=$src;?>" id="cropbox">
<form action="crop.php" method="post" onsubmit="return checkCoords();">
<input type="hidden" name="src" value="<?=$src;?>">
<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="Recortar" class="btn btn-large btn-inverse">
</form>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario