Problema al redimensionar imagenes con PHP

[manuparquegiralda]

Veras, yo tenia el mismo problema que tu y la solucion que le di fue redimensionarlas al guardarlas en la BD, para disminuirles el tamaño. Pero aun asi cada una queda con dimensiones diferentes, asi que me idee una funcion en PHP, para que segun las dimensiones de la imagen, le diera un top o un left negativo para encuadrarla en una capa overgflow y asi quede encuadrada en el centro.

Primero guardo la imagen con este codigo en este caso un ancho o un alto maximo de 120 dependiendo de si la imagen es mas alta que ancha o viceversa.

Código PHP:

$fotoOriginal = "La foto original que sube el usuario";
$altoancho = GetImageSize($fotoOriginal);
$ancho = $altoancho[0];
$alto = $altoancho[1];
$medidaMax = 120;
//Destino foto normal
$destinoNorm = "URLdestino.jpg";    
//Proporcionamos la imagen a un maximo de 120px para un lado
if(($ancho > $medidaMax)&&($alto > $medidaMax)){
    if(($ancho > $alto)or($ancho == $alto)){
           $resta = $ancho - $medidaMax;
        $porcentaje = ($resta*100)/$ancho;
        $alto_def = $alto-(($alto*$porcentaje)/100);
 
        $alto = round($alto_def);
        $ancho = $medidaMax;
    }else if($ancho < $alto){
            $resta = $alto - $medidaMax;
        $porcentaje = ($resta*100)/$alto;
        $ancho_def = $ancho-(($ancho*$porcentaje)/100);
            
        $alto = $medidaMax;
        $ancho = round($ancho_def);
    }
}else{
    $ancho = $altoancho[0];
    $alto = $altoancho[1];
}
//Copiamos la imagen dentro de un thumb redimensionado y la subimos al servidor
$thumb = imagecreatetruecolor($ancho,$alto);
$resource = imagecreatefromjpeg($fotoOriginal);
imagecopyresampled($thumb,$resource,0,0,0,0,$ancho,$alto,$altoancho[0],$altoancho[1]);
$copy = imagejpeg($thumb,$destinoNorm,90);
imagedestroy($thumb);
 

Despues utilizo esta funcion para darle el ancho y alto con el que quiero mostrar la imagen, esta funcion php, iria en la misma pagina donde se va a mostrar el HTML.

Código PHP:

//Funcion de ridemensionar fotos
 
function redimensionar($foto,$alto_capa,$ancho_capa){
    if($foto == ""){
        $foto = "URL foto por defecto para todos los usuarios";
    }
    
    $altoancho = GetImageSize($foto);  
    $alto = $altoancho[1];
    $ancho = $altoancho[0];
    
    if(($ancho > $alto)or($ancho == $alto)){
    
        $resta = $alto - $alto_capa;
        $porcentaje = ($resta*100)/$alto;
        $ancho_def = $ancho-(($ancho*$porcentaje)/100);    
    
        $alto = $alto_capa;
        $ancho = round($ancho_def);
        $prop_left = round(($ancho_capa*15)/100);
        if($ancho < ($ancho_capa + $prop_left)){
            $ancho = $ancho_capa + $prop_left;
        }
        $style = "left:-".$prop_left."px";
    
    }else if($ancho < $alto){
    
        $resta = $ancho - $ancho_capa;
        $porcentaje = ($resta*100)/$ancho;
        $alto_def = $alto-(($alto*$porcentaje)/100);
    
        $ancho = $ancho_capa;
        $alto = round($alto_def);
        $prop_top = round(($alto_capa*10)/100);
        if($alto < ($alto_capa + $prop_top)){
            $alto = $alto_capa + $prop_top;
        }
        $style = "top:-".$prop_top."px";
    
    }
 
return '<div style=" position:absolute; '.$style.'">
            <img src="'.$foto.'" width="'.$ancho.'px" height="'.$alto.'px" />
        </div>
        ';        
}
 

Si te fijas esta funcion retorna una division cuyas propiedades de ancho alto y posicionamiento dentro de la capa HTML, se le dan segun las dimensiones de la foto que se vaya a mostrar.

Y por ultimo lo muestro de una division con esta caracteristicas en la que le doy las medidas que quiero que tenga.

Código CSS:

.fotoPerfil{
        position:relative;
        height:80px;
        width:80px;
        overflow:hidden;
}
 

Código HTML:

<div id="fotoPerfil" class="fotoPerfil">
        <!--AQUÍ LLAMAS A LA FUNCION DE REDIMENSIONAR CON LAS DIMENSIONES EN LAS QUE QUIERAS MOSTRAR  LAS FOTOS-->
        <? echo redimensionar("URL de la foto",80,80) ?>
</div>
 

Si te fijas, aqui le doy a la funcion que me muestre la imagen con unas dimensiones de 80*80px dentro de una capa con la propiedad de overflow"hidden". Y si te vuelves a fijar en la funcion "redimensionar" le doy un left o un top negativo dependiendo de las dimensiones de la foto, con lo que queda centrada en la division y la parte restante oculta por el overflow de la misma.

No se si lo entenderas, pero si copias el codigo y lo pruebas seguro que lo ves mas claro,