Subir y redimensionar imágenes con PHP y SimpleImage

En esta oportunidad les he traído un ejemplo que sé a muchos les va a servir. Se trata de subir y redimensionar imágenes, pero haciendo uso de una clase creada por Simon Jarvis, un programador que la ha creado para hacer mucho más fácil tanto la lectura como redimensionamiento de las imágenes.

Antes de empezar veamos que funciones contiene la clase SimpleImage y para que sirven cada una de ellas:

load (string filename): Nos permite leer unda imagen desde una ubicación específica, definida en una cadena, la cual le pasamos como parámetro.

save (string filename, obj image_type, int compression, int permissions): Esta función nos permitirá guardar los cambios especificados en la imagen, para realizar esto nos pedirá en primer lugar el nombre del archivo, mediante la variable image_type especificaremos el tipo de imagen a guardar (su valor por defecto es JPEG), luego en la variable compression especificaremos la calidad de la misma (la cual sólo tendrá efecto si es de tipo JPEG), y luego con la variable permissions especificaremos los permisos de la imagen recién creada.

Posibles valores de image_type:

IMAGETYPE_JPEG: Para definir a la imagen como tipo JPEG.
IMAGETYPE_GIF: Para definir la imagen como tipo GIF.
IMAGETYPE_PNG: Para definir a la imagen como tipo PNG.

output (obj image_type): Nos mostrará como salida la imagen que hayamos leído, salvado y/o modificado, especificando el tipo de imagen resultante.

Nota: En la función output, no olvidar que para mostrar como salida una imagen (si no ha quedado claro, esa función nos permite mostrar a la página de resultado, como si fuera una imagen), tenemos que definir el header necesario para este menester…

Código:

header('Content-Type: image/jpeg');

… y tampoco olvidar que el Content-Type debe coincidir con el tipo de imagen que quieras especificar.

getWidth (): Esta función nos retornará el ancho (en píxeles) de una imagen.

getHeight (): Esta nos devolverá el alto (en píxeles) de una imagen.

resizeToHeight (int height): Redimensionará el alto de una imagen, lo que no quiere decir que no tendrá en cuenta el ancho de la misma, sino que el ancho también se redimensionará de manera proporcional al alto especificado.

resizeToWidth (int width): Lo mismo que la anterior, pero en viceversa: el alto de la imagen se ajustará acorde al ancho que nosotros queramos.

scale (int scale): Esta función simplemente redimensionará la imagen de acuerdo al porcentaje (representado en enteros) que le especifiquemos. Por ejemplo: si queremos que la imagen se redimensione al 50% simplemente haremos scale (50).

resize (int width, int height): Redimensiona la imagen de acuerdo al ancho y alto que nosotros definamos.

Ahora sí, para empezar a usar la clase, hay que definir la estructura del formulario que nos permitirá realizar esta operación:

Código:

<form name="form1" id="form1" method="post" action="llamar_funcion.php" enctype="multipart/form-data">
	<div class="subirimg_form">	
		<div class="form_titulo">Subir im&aacute;genes</div>          
		<div class="form_row">
			<label class="subirimg"><strong>Imagen:</strong></label>
			<input name="file_img" id="file_img" type="file" class="subirimg_input" />
		</div>
		<div class="form_row">
			<label class="subirimg"><strong>Thumbnail: </strong></label>
			<input name="chkThumb" type="checkbox" id="chkThumb" value="checkbox" />
		</div>
		<div class="form_row">
			<label class="subirimg"><strong>Ancho: </strong></label>
			<input name="txtAncho" type="text" class="subirimg_input" id="txtAncho" size="10" />
		</div>
		<div class="form_row">
			<label class="subirimg"><strong>Alto:</strong></label>
			<input name="txtAlto" type="text" class="subirimg_input" id="txtAlto" size="10" />
		</div>
		<div class="form_row">
			<input name="btnSubir" id="btnSubir" class="btnupload" type="submit" value="Subir" />
		</div>
	</div>
</form>

Nota: No importa cómo diseñes el formulario, para el ejemplo sólo son necesarios los campos de texto, el botón de subida, y, por supuesto, el campo de archivo. El diseño se logra con la hoja de estilo que también viene en el archivo descargable.

Ahora incluímos la clase y definimos las variables que nos servirán para redimensionar la imagen: una para definir si queremos redimensionar la imagen, otra para especificar el ancho y la última para especificar el alto.

Código:

include("SimpleImage.class.php"); 
$var_usar_thumb = isset($_POST['chkThumb']) ? 1 : 0; 
$var_thumb_ancho = isset($_POST['txtAncho']) ? $_POST['txtAncho'] : 300; 
$var_thumb_alto = isset($_POST['txtAlto']) ? $_POST['txtAlto'] : 300;

Después validamos si en la imagen no hay ningún tipo de error:

Código:

if ($_FILES["file_img"]["error"] > 0){
	echo "Hay alg&uacute;n error con la imagen, para regresar haga <a href=\"form_funcion.html\">Click aqu&iacute;.</a>";
}

Pero en caso contrario:

Código:

else{ //sino
	$var_name_img = $_FILES["file_img"]["name"]; //repecionamos la imagen, y tomamos su nombre
	$var_img_dir = "archivos/"; //obtenemos el directorio actual con el cual se está trabajando
	if (move_uploaded_file($_FILES["file_img"]["tmp_name"], $var_img_dir.$var_name_img)){ //si la imagen es subida al directorio del servidor
		$subida = true; //admitimos que la subida fue correcta
	}

A continuación hacemos ya uso de la clase SimpleImage:

Código:

if ($subida === true){ //si la subida fue correcta
		$obj_simpleimage = new SimpleImage(); //creamos un objeto de la clase SimpleImage
		$obj_simpleimage->load($var_img_dir.$var_name_img); //leemos la imagen 
		if ( ($_FILES["file_img"]["type"]) != 'image/gif' && $var_usar_thumb == 1){//Si la imagen no es de tipo gif, y marcamos en el formulario como thumbnail
			$var_nuevo_archivo = time().rand().".jpg"; //asignamos un nombre aleatorio al nuevo archivo, para evitar sobreescritura
			$obj_simpleimage->resize($var_thumb_ancho,$var_thumb_alto); //redimensionamos la imagen, con los valores de ancho y alto que hemos especificado
		}
                else{ //sino
			$var_nuevo_archivo = time().rand().$var_name_img; //se agregará al nombre original de la imagen una serie de números aleatorios
		}
		$var_nuevo_archivo = strtolower(str_replace(' ', '_', $var_nuevo_archivo)); //reemplazamos los espacios en blanco con sub-guiones, para hacer más compatible el nombre del archivo
		$obj_simpleimage->save($var_img_dir.$var_nuevo_archivo); //guardamos los cambios efectuados en la imagen
		unlink($var_img_dir . $var_name_img); //eliminamos del temporal la imagen que estabamos subiendo
		echo "<div align=\"center\">Imagen subida correctamente. <br /><h4>Vista de la imagen:</h4><br /><img src=\"".$var_img_dir.$var_nuevo_archivo."\" alt=\"".$var_nuevo_archivo."\" /></div>"; //mostramos los resultados
	}
}

Ahora hacemos una prueba para ver si funciona correctamente:

Una crítica que se le puede hacer a esta clase, es que, además de ser muy simple (demasiado diría yo), no administra muy bien la parte de manejo de gifs (prueben subiendo un gif para que vean de lo que les estoy hablando). También debería poner lo de la cantidad limitada de tipo de imágenes que puede tratar, pero eso también corre por cuenta de la librería GD que utiliza, así que no podríamos tampoco pedirle mucho a la clase.

Conclusión:

SimpleImage fue creada para simplemente usarla en caso de hacer pruebas, aprender o de querer sacarnos de un apuro, pero para proyectos realmente grandes y serios no la recomiendo.

Nota: Ya haré una clase mucho mejor y digna de una persona de pene grande como yo, no se preocupen muchachos.

Descargar

¿Qué le harías a la chinita? Escríbeme a lovelessisma@gmail.com