Cita:
Iniciado por dAvidcA 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_original, 0, 0, $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.";
}
}
?>