Ver Mensaje Individual
  #3 (permalink)  
Antiguo 26/09/2013, 01:40
jorgemibanez
Invitado
 
Mensajes: n/a
Puntos:
Exclamación Respuesta: Recortar imagen con PHP y JQuery, imgareaselect

Cita:
Iniciado por dAvidcA Ver Mensaje
Hola jorgemibanez, bueno, primero que todo tal vez éste tema sea más PHP que javascript.

Partimos de que ya se ha tenido en cuenta lo siguiente:

1. Teniendo en cuenta que ya tienes la imagen en el servidor y sabes su ruta.
2. Teniendo en cuenta donde quieres guardar la nueva imagen.
3. Teniendo en cuenta que ya sabes lo que quieres recortar en la imagen: desde donde (x1,y1), cuanto de alto (Height) y cuanto de ancho (Width).

Debes enviar estos 6 datos a PHP para allí utilizar el método imagecopyresampled.

Ejemplo:

(Imagen tomada de: http://dextructables.com/manipular-imagenes-php/)

En lo anterior se utilizaría el siguiente código:

Código PHP:
<?php
// El archivo
$src_original 'fotos/imagenOriginal.jpg'//Ponerla desde JavaScript por parametros
$src_guardar 'fotos/imagenOriginal_recortada.jpg'//Donde la quiere guardar

//Desde donde
$x1 76;
$y1 72;

//Ancho en pixeles
$ancho 164;

//Alto en pixeles
$alto 106;

// Redimensionar
imagecopyresampled($src_guardar$src_original00$x1$y1$ancho$alto$ancho$alto);

?>
Cualquier duda comenta de nuevo.

Saludos.


Bueno, gracias por tu respuesta; mira, en la imagen de arriba puedes ver una parte de lo estoy haciendo, el cuadro seleccionador se puede mover a distintas partes de la imagen y uno de los cuadros de colores que hay abajo es "Guardar", la idea es que cuando se de clic en el la parte seleccionada de la imagen sea guardada.

PD:
La imagen original ya está guardada en una carpeta del servidor.

Mi pregunta es, ¿Qué código debo poner para poder captar la selección?.

He intentado con varios y no me han resultado. Tu código se ve muy bien pero no sabría implementarlo en el mío, echa un vistazo:

<?php
session_start();
mysql_connect("localhost","root", "");
$target = "images/";
$target = $target . basename( $_FILES['filUpload']['name']);
$filUpload_size = $_FILES['filUpload']['size'];
$filUpload_type = $_FILES['filUpload']['type'];
$ok=1;

//Tamaño permitido de imagen
if ($filUpload_size > 350000)
{
echo "Tu foto es muy grande.<br>";
$ok=0;
}

//Tipo de archivos permitidos.
if ($filUpload_type =="text/php")
{
echo "No se permiten archivos PHP<br>";
$ok=0;
}

//Here we check that $ok was not set to 0 by an error
if ($ok==0)
{
Echo "Lo sentimos, no se pudo subir el archivo, inténtalo de nuevo.";
}

//Si todo va bien se sube el archivo
else
{
if(move_uploaded_file($_FILES['filUpload']['tmp_name'], $target))
{
$myhtml = <<<EOFILE
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
$(function () {
$('#imgAvatar').imgAreaSelect({ aspectRatio: '1:1', handles: true, minHeight: 120, minWidth: 120, x1: 0, y1: 0, x2: 120, y2: 120 });
});
</script>


/*Este es el script que permite que se haga la selección*/

</head>
<body>
<div>
<div>
<p>
Selecciona una foto para tu perfil</p>
</div>
<div>
<img id="imgAvatar" src="$target"> /*Este código llama la imagen del servidor para realizar la selección.*/
</div>
</div>
<div>
<form id="save_profile_photo" action="/*aquí debería ir el .php que guarde la selección*/">
<input type="submit" value="Guardar">
</form>
</div>
</div>
</body>
</html>
EOFILE;
echo $myhtml;
}
else
{
echo "Lo lamentamos, hubo un error subiendo tu archivo, inténtalo nuevamente.";
}
}
?>