Redimensionar imágen proporcionalmente y con tamaño fijo en PHP

El tratamiento de imágenes es algo que, tarde o temprano, los que desarrollamos páginas web tenemos que afrontar. En este caso vamos a proponeros una función que he desarrollado personalmente para redimensionar imágenes proporcionalmente y con tamaño fijo en PHP, más concretamente para crear thumbnails de imágenes de dimensiones proporcionales y pudiendo especificar un tamaño fijo.

Antes de mostrar el código para redimensionar imágenes proporcionalmente y con tamaño fijo en PHP, vamos a intentar explicar en qué consiste: En primer lugar tenemos una imágen de unas dimensiones cualquieras, en nuestro caso de 560x560px.

Ejemplo de imágen a redimensionar.

Pongámonos en el caso de que queremos crear un thumbnail de dicha imágen con unas dimensiones fijas de 160x100px. Nos sería imposible en principio redimensionarla de forma proporcional ya que las imagen original y el thumbnail tienen proporciones diferentes, con lo que u obtendríamos una imágen a 160x160px ó a 100x100px para que sea de tamaño proporcional.

Ejemplo de dos imágenes proporcionales.

En este caso, si queremos que la imágen final tenga un tamaño fijo lo ideal sería que el tamaño restante sea rellenado por un marco de color transparente. En este caso cogeríamos la imágen de 100x100px y le añadiríamos un marco a ambos lados de 30px en cada lado.

Ejemplo de imágen proporcional con tamaño fijo.

Una vez explicado este punto, pasamos a mostraros la función y a detallarla:

Redimensionar imágen proporcionalmente y con tamaño fijo en PHP

function createThumb($sImagen, $nWidth = false, $nHeight = false)
{
    // Variables
    $sNombre = null;
    $sPath = null;
    $sExt = null;
    $aImage = null;
    $aThumb = null;
    $aImageMarco = null;
    $ImTransparente = null;
    $aSize = null;
    $nWidthMarco = false;
    $nWidthHeight = false;
    $nX = false;
    $nY = false;

    // Obtenemos el nombre de la imagen
    $sNombre = basename( $sImagen );
    // Obtenemos la ruta especificada para buscar la imagen
    $sPath = dirname( $sImagen ) . '/';
    // Obtenemos la extension de la imagen
    $sExt = mime_content_type( $sImagen );

    // Creamos el directorio thumbs
    if( ! is_dir( $sPath . 'thumbs/' ) )
        @mkdir( $sPath . 'thumbs/', 0777, true ) or die( 'No se ha podido crear el directorio "' . $sPath . 'thumbs/".' );

    // Creamos la imagen a partir del tipo
    switch( $sExt )
    {
        // Imagen JPG
        case 'image/jpeg':
            $aImage = @imageCreateFromJpeg( $sImagen );
            break;
        // Imagen GIF
        case 'image/gif':
            $aImage = @imageCreateFromGif( $sImagen );
            break;
        // Imagen PNG
        case 'image/png':
            $aImage = @imageCreateFromPng( $sImagen );
            break;
        // Imagen BMP
        case 'image/wbmp':
            $aImage = @imageCreateFromWbmp( $sImagen );
            break;
        default:
            return 'No se conoce el tipo de imagen enviado, por favor cambie el formato. Sólo se permiten imágenes *.jpg, *.gif, *.png ó *.bmp.';
            break;
    }

    // Obtenemos el tamaño de la imagen original
    $aSize = getImageSize( $sImagen );

    // Calculamos las proporciones de la imagen //

    // Obteniendo el alto (Recogiendo ancho y no alto)
    if( $nWidth !== false && $nHeight === false )
        $nHeight = round( ( $aSize[1] * $nWidth ) / $aSize[0] );
    // Obteniendo el ancho (Recogiendo alto y no ancho)
    elseif( $nWidth === false && $nHeight !== false )
        $nWidth = round( ( $aSize[0] * $nHeight ) / $aSize[1] );
    // Obteniendo proporciones (Recogiendo alto y ancho)
    elseif( $nWidth !== false && $nHeight !== false )
    {
        // Guardamos las dimensiones del marco
        $nWidthMarco = $nWidth;
        $nHeightMarco = $nHeight;

        // Si el ancho es mayor
        if( $nWidth < $nHeight )
        {
            $nHeight = round( ( $aSize[1] * $nWidth ) / $aSize[0] );
            $nX = 0;
            $nY = round( ( $nHeightMarco - $nHeight ) / 2 );
        }
        // Si el alto es mayor
        elseif( $nHeight < $nWidth )
        {
            $nWidth = round( ( $aSize[0] * $nHeight ) / $aSize[1] );
            $nX = round( ( $nWidthMarco - $nWidth ) / 2 );;
            $nY = 0;
        }
    }
    // El ancho y el alto no se han enviado, informamos del error
    elseif( $nWidth === false && $nHeight === false )
        return 'No se ha especificado ningún valor para el ancho y el alto de la imágen.';

    // La nueva imagen reescalada
    $aThumb = imageCreateTrueColor( $nWidth, $nHeight );

    // Reescalamos
    imageCopyResampled( $aThumb, $aImage, 0, 0, 0, 0, $nWidth, $nHeight, $aSize[0], $aSize[1] );

    // Si tenemos que crear el marco
    if( $nWidthMarco !== false && $nHeightMarco !== false )
    {
        // El marco
        $aImageMarco = imageCreateTrueColor( $nWidthMarco, $nHeightMarco );

        // Establecemos la imagen de fondo transparente
        imageAlphaBlending( $aImageMarco, false );
        imageSaveAlpha( $aImageMarco, true );

        // Establecemos el color transparente (negro)
        $ImTransparente = imageColorAllocateAlpha( $aImageMarco, 0, 0, 0, 0xff/2 );

        // Ponemos el fondo transparente
        imageFilledRectangle( $aImageMarco, 0, 0, $nWidthMarco, $nHeightMarco, $ImTransparente );

        // Combinamos las imagenes
        imageCopyResampled( $aImageMarco, $aThumb, $nX, $nY, 0, 0, $nWidth, $nHeight, $nWidth, $nHeight );

        // Cambiamos la instancia
        $aThumb = $aImageMarco;
    }

    // Salvamos
    imagePng( $aThumb, $sPath . 'thumbs/' . $sNombre );

    // Liberamos
    imageDestroy( $aImage );
    imageDestroy( $aThumb );

    return true;
}

La función puede recibir tres parámetros, siendo el primero la ruta de la imágen a redimensionar, el segundo sería el ancho que queremos darle y el tercero el alto. Si especificamos ambos parámetros, ancho y alto, la imágen se redimensionará a dicho tamaño fijo dándole un marco transparente. Si especificamos solo el ancho tendremos una imágen proporcional con respecto al ancho, en nuestro caso si especificamos que la imagen de 560x560px la queremos con un ancho de 160px, el resultado final tendrá unas dimensiones de 160x160px. De igual forma con el alto, si especificamos para la imágen de 560x560px un alto de 100px, el resultado final tendrá unas dimensiones de 100x100px. También cabe destacar que se creará automáticamente un directorio llamado “thumbs” y ahí se almacenarán las imágenes resultantes. Siéntete libre de cambiar el código a tu gusto.

Cualquier error o sugerencia en el código será bien recibida en los comentarios.

Share