Foros del Web » Programando para Internet » Jquery »

Recortar imagen con PHP y JQuery, imgareaselect

Estas en el tema de Recortar imagen con PHP y JQuery, imgareaselect en el foro de Jquery en Foros del Web. Hola a todos, he hecho una página donde el usuario sube una foto y luego selecciona la parte de esa foto que que quiere recortar, ...
  #1 (permalink)  
Antiguo 24/09/2013, 12:04
jorgemibanez
Invitado
 
Mensajes: n/a
Puntos:
Pregunta Recortar imagen con PHP y JQuery, imgareaselect

Hola a todos, he hecho una página donde el usuario sube una foto y luego selecciona la parte de esa foto que que quiere recortar, hasta aquí todo funciona,el problema que tengo es cómo guardar la selección, alguna idea, aquí mis códigos:

(Lo estoy haciendo con imgareaselect (Para los que lo conozcan))

<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 script es el que me permite hacer la selección sobre la imagen.

<img id="imgAvatar" src="$target"> Esta es la imagen.

Como ya les he dicho puedo hacer la selección, más no se cómo guardar dicha selección. Creo que hay que hacerlo con php. Alguna ayuda, por favor.
  #2 (permalink)  
Antiguo 24/09/2013, 13:45
Avatar de dAvidcA  
Fecha de Ingreso: septiembre-2009
Ubicación: /home/dev/
Mensajes: 73
Antigüedad: 14 años, 7 meses
Puntos: 7
Respuesta: Recortar imagen con PHP y JQuery, imgareaselect

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.
  #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.";
}
}
?>

Etiquetas: javascript, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:45.