Problemas con redimensionamiento de imagenes

[raulbotella83]

Si tengo una imagen con unas dimensiones de 400px X 300px porque cuando en el codigo html la hago mas pequeña pierde resolucion? (esta en jpg)

Se supone que debe perder resolucion cuando la amplio, pero que debo hacer para que no suceda cuando la hago pequeña?

Es para mostrar varias vistas de unos zapatos, si son 4 vistas, no quiero tener 4 fotos con las dimensiones grandes y 4 con las dimensiones pequeñas, o no hay solucion?

Un saludo, y gracias por vuestro tiempo.

[Wizart]

no la hay, lo normal es hacer tu imagen pequeña y tu imagen grande, si tuvieras muchos zapatos te recomiendo que hagas un Automatizador en Photoshop tienes la opción y te genera el mismo el Thumb de imágenes pequeñas y grandes, pero ten en cuenta que las imágenes pequeñas no es solo porque se van a ver bien ya que es su tamaño original y no redimensionado si no que también agilizarás la carga de información al ser la imagen mas pequeña, eso de enganchar las fotos en el dreamweaver y hacerlas mas pequeñas olvidate porque son triquiñuelas, las imagenes tienen su tamaño y nada mas.

[_CrUX_]

Hola Amigo, no te Recomiendo hacer Tanto Trabajo, Ademas Haces la Página más Pesada.
Mi Recomendación es que Trates de Usar Alguna Libreria de JavaScript jQuery, la cual tiene muchos Plugin Muy Buenos.

Mira mas Sobre el Tema, Cualquier Cosa Postea denuevo.

CrUX

[raulbotella83]

ok,

Me he estado documentando y veo una serie de funciones para crear thumbails de las imagenes.

Lo he probado y funciona correctamente, la pregunta es:

Al crear la copia de la misma imagen pero mas reducida, pierde menos resolucion que si le cambiara el tamaño en el html no? A simple vista he probado y parece que se ve peor esta si cambio el tamaño en el html que si hago la copia...

dejo el codigo por si le interesan:

Código PHP:

  function abrir_Imagen($imagen) {
    if (@$info_imagen = getimagesize($imagen)) {
        switch ($info_imagen['mime']) {
        case "image/jpeg":
            if (!@$imagen_fuente = imagecreatefromjpeg($imagen)) {
                return 0;
            }
            break;
        case "image/gif":
            if (!@$imagen_fuente = imagecreatefromgif($imagen)) {
                return 0;
            }
            break;
        case "image/png":
            if (!@$imagen_fuente = imagecreatefrompng($imagen)) {
                return 0;
            }
            break;
        }
    } else {
        return 0;
    }
    return $imagen_fuente;
}
 
function crear_Thumbnail($imagen, $ancho_max = 200, $alto_max = 200, $calidad = 80, $destino = "", $marca = "", $posicion_marca = 0, $margen = 4) {
 
    if ($destino == "") {
        header('Content-type: image/jpeg');
    }
 
    //    OBTENGO LOS DATOS ORIGINALES DE LA IMAGEN Y CHEQUEO QUE SEA UNA IMAGEN VALIDA
    if (@$datos_img = getimagesize($imagen)) {
        $ancho = $datos_img[0];
        $alto = $datos_img[1];
        
        
        $ancho_orig = $ancho;
        $alto_orig = $alto;
        
        //    CALCULO ANCHO Y ALTO PROPORCIONALES
        if ($ancho > $ancho_max) {
            $proporcion = round(($ancho_max * 100) / $ancho);
            $ancho = $ancho_max;
            $alto = round(($alto * $proporcion) / 100);
        }
        if ($alto > $alto_max) {
            $proporcion = round(($alto_max * 100) / $alto);
            $alto = $alto_max;
            $ancho = round(($ancho * $proporcion) / 100);
        }
        
        //    CREO LA NUEVA IMAGEN
        $imagen_nueva = imagecreatetruecolor($ancho, $alto);
        
        //    ABRO LA IMAGEN FUENTE
        if (!$imagen_fuente = abrir_Imagen($imagen)) {
            return 0;
            exit;
        }
        
        //    COPIO LA IMAGEN FUENTE EN LA NUEVA
        imagecopyresampled($imagen_nueva, $imagen_fuente, 0, 0, 0, 0, $ancho, $alto, $ancho_orig, $alto_orig);
        
        //    CHEQUEO SI HAY QUE AGREGAR UNA MARCA
        if (($marca != "") && ($imagen_marca = abrir_Imagen($marca))) {
            list($ancho_marca, $alto_marca) = getimagesize($marca);
            $pos_x = $margen;
            $pos_y = $margen;
            switch ($posicion_marca) {
            case 1:
                $pos_x = ($ancho - $ancho_marca) - $margen;
                break;
            case 2:
                $pos_y = ($alto - $alto_marca) - $margen;
                break;
            case 3:
                $pos_x = ($ancho - $ancho_marca) - $margen;
                $pos_y = ($alto - $alto_marca) - $margen;
                break;
            }
            imagecopy($imagen_nueva, $imagen_marca, $pos_x, $pos_y, 0, 0, $ancho_marca, $alto_marca);
        }
        
        imagejpeg($imagen_nueva, $destino, $calidad);
        
        return 1;
    } else {
        //    HA OCURRIDO UN ERROR AL OBTENER LOS DATOS DE LA IMAGEN.
        //    PUEDE SER QUE EL ARCHIVO NO EXISTA, O QUE NO SEA UNA
        //    IMAGEN VALIDA.
        return 0;
    }
}
crear_Thumbnail("zapato.jpg", 100, 100, 80, "zap_1.jpg"); 
   

Lo dicho, lo puedo hacer así? es que asi evitaria muchos procesos como:

Crear lotes/acciones en photoshop
Subir dos imagenes por modelos...

Pero bueno si es la única manera,....


Un saludo, y gracias por vuestra respuesta.

[JoseAlejandro_Realza]

Hola que tal... yo estoy interesado en este tema, porque necesito que cuando mis usuarios vayan a subir sus fotos a su perfil si la imagen pasa un limite de px se redusca, intente con el script que dio el amigo Raul y no logro hacerlo funcionar, porque no me carga las imagenes a la carpeta "fotogracias/", y si meto imagenes png o gif igual hace todo como si la cargara, no me presenta errores ni nada, asi que algo no debe estar trabajando, y la diferencia es que yo no quiero seleccionarla por marca, solo quiero cargarla al directorio y cambiar sus dimensiones... Gracias por Todo, espero sepan ayudarnos..! =)

Aca esta el Codigo cambiandole la direccion del directorio:

Código PHP:

  <?php
 
function abrir_Imagen($imagen) { 
    if (@$info_imagen = getimagesize($imagen)) { 
        switch ($info_imagen['mime']) { 
        case "image/jpeg": 
            if (!@$imagen_fuente = imagecreatefromjpeg($imagen)) { 
                return 0; 
            } 
            break; 
        case "image/gif": 
            if (!@$imagen_fuente = imagecreatefromgif($imagen)) { 
                return 0; 
            } 
            break; 
        case "image/png": 
            if (!@$imagen_fuente = imagecreatefrompng($imagen)) { 
                return 0; 
            } 
            break; 
        } 
    } else { 
        return 0; 
    } 
    return $imagen_fuente; 
} 
  
function crear_Thumbnail($imagen, $ancho_max = 500, $alto_max = 500, $calidad = 80, $destino = "Galerias/", $marca = "", $posicion_marca = 0, $margen = 4) { 
  
    if ($destino == "Galerias/") { 
        header('Content-type: image/jpeg'); 
    } 
  
    //    OBTENGO LOS DATOS ORIGINALES DE LA IMAGEN Y CHEQUEO QUE SEA UNA IMAGEN VALIDA 
    if (@$datos_img = getimagesize($imagen)) { 
        $ancho = $datos_img[0]; 
        $alto = $datos_img[1]; 
         
         
        $ancho_orig = $ancho; 
        $alto_orig = $alto; 
         
        //    CALCULO ANCHO Y ALTO PROPORCIONALES 
        if ($ancho > $ancho_max) { 
            $proporcion = round(($ancho_max * 100) / $ancho); 
            $ancho = $ancho_max; 
            $alto = round(($alto * $proporcion) / 100); 
        } 
        if ($alto > $alto_max) { 
            $proporcion = round(($alto_max * 100) / $alto); 
            $alto = $alto_max; 
            $ancho = round(($ancho * $proporcion) / 100); 
        } 
         
        //    CREO LA NUEVA IMAGEN 
        $imagen_nueva = imagecreatetruecolor($ancho, $alto); 
         
        //    ABRO LA IMAGEN FUENTE 
        if (!$imagen_fuente = abrir_Imagen($imagen)) { 
            return 0; 
            exit; 
        } 
         
        //    COPIO LA IMAGEN FUENTE EN LA NUEVA 
        imagecopyresampled($imagen_nueva, $imagen_fuente, 0, 0, 0, 0, $ancho, $alto, $ancho_orig, $alto_orig); 
         
        //    CHEQUEO SI HAY QUE AGREGAR UNA MARCA 
        if (($marca != "") && ($imagen_marca = abrir_Imagen($marca))) { 
            list($ancho_marca, $alto_marca) = getimagesize($marca); 
            $pos_x = $margen; 
            $pos_y = $margen; 
            switch ($posicion_marca) { 
            case 1: 
                $pos_x = ($ancho - $ancho_marca) - $margen; 
                break; 
            case 2: 
                $pos_y = ($alto - $alto_marca) - $margen; 
                break; 
            case 3: 
                $pos_x = ($ancho - $ancho_marca) - $margen; 
                $pos_y = ($alto - $alto_marca) - $margen; 
                break; 
            } 
            imagecopy($imagen_nueva, $imagen_marca, $pos_x, $pos_y, 0, 0, $ancho_marca, $alto_marca); 
        } 
         
        imagejpeg($imagen_nueva, $destino, $calidad); 
         
        return 1; 
    } else { 
        //    HA OCURRIDO UN ERROR AL OBTENER LOS DATOS DE LA IMAGEN. 
        //    PUEDE SER QUE EL ARCHIVO NO EXISTA, O QUE NO SEA UNA 
        //    IMAGEN VALIDA. 
        return 0; 
    } 
} 
crear_Thumbnail("zapato.jpg", 100, 100, 80, "zap_1.jpg"); 
?>
 
<form enctype="multipart/form-data" action="redimencion.php" method="post"> 
<input type="hidden" name="MAX_FILE_SIZE" value="200000000"> 
Subir esta imagen: <input name="imagen" type="file">  
<form action="<? echo $PHP_SELF;?>" method="post"> 
Foto:<br> 
<input type="text" name="foto"><br> 
Descripcion: 
<br> 
<textarea name="descripcion" cols="50" rows="10"></textarea><br> 
<input type="submit" name='submit' value="Subir Foto"> 
</form>  
<p>&nbsp;</p>
<p>&nbsp;</p>  

[raulbotella83]

Tienes creados dos formularios...

En el segundo tienes que ponerle enctype="multipart/form-data" para el envio del archivo temporal, sino no logras pasar la imagen, y el primero no creo que te sea necesario crearlo no?

Un saludo.

[JoseAlejandro_Realza]

Si hermano, pero eso es porque esos otros campos seran insertados a una base de datos con la direccion nueva de la imagen

[raulbotella83]

<form enctype="multipart/form-data" action="redimencion.php" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="200000000">
Subir esta imagen: <input name="imagen" type="file">
<form action="<? echo $PHP_SELF;?>" method="post">
Foto:<br>
<input type="text" name="foto"><br>
Descripcion:
<br>
<textarea name="descripcion" cols="50" rows="10"></textarea><br>
<input type="submit" name='submit' value="Subir Foto">
</form>
<p>&nbsp;</p>
<p>&nbsp;</p>

Haber te comento, esto no lo puedes hacer, no debes meter un formulario dentro de otro, ademas que pienso que con uno solo es suficiente.

Has probado a ejecutar unicamente el código??? antes de ponerle el formulario?

Si no lo has probado, pruebalo para detectar el fallo, ademas que según has pegado la linea:
crear_Thumbnail("zapato.jpg", 100, 100, 80, "zap_1.jpg");
es de mi código, asi que este codigo te crea el thumbnail de zapato.jpg, y si no tienes ese archivo no correrá bien el código ni te creará la copia en miniatura....

checkealo y cuentas que tal va...

[raulbotella83]

Vuelvo a reabrir el tema, no me funciona la solucion que he tomato, las imagenes no tienen buena calidad cuando las reduzco en el thumbnail. Tienen la misma calidad que si cogiera el html y directamente le cambiara el tamaño.

El caso es que son varias vistas de una misma foto, que las puedo ver en grande o en pequeño, y si son 4 vistas, crear 8 imagenes(4 grandes y 4 pequeñas) para cada foto es un poco engorroso... a parte que a la hora de hacer modificaciones seria mas tedioso.

Estoy seguro que debe haber alguna solucion, hasta el mismo google en busquedas de imagenes lo utiliza, espero puedan ayudarme a conseguir que estas imagenes no pierdan calidad.

[ramonjosegn]

hay un script en php que hace lo que queréis pero no recuerdo el nombre...

[ElJavista]

Bueno, a continuación dejo una clase de mi autoría, sirve para lo que necesitan y talvez más. Pruebenla y si tiene preguntas las hacen:

Código PHP:

  <?php
  class Imagen {
        private $exist = false;
        private $width = 0;
        private $height = 0;
        private $source = null;
        private $thumb = null;

        function Imagen($img) {
                 if (file_exists($img)) {
                    list($wi, $he, $tip) = getimagesize($img);
                    $this->width = $wi;
                    $this->height = $he;

                    if ($tip == 1) $this->source = imagecreatefromgif($img);
                    elseif ($tip == 2) $this->source = imagecreatefromjpeg($img);
                    elseif ($tip == 3) $this->source = imagecreatefrompng($img);
                    $this->exist = true;
                 }
        }

        private function createThumb($w, $h) {
                $this->thumb = imagecreatetruecolor($w, $h);
        }

        function makeThumb($ruta, $w, $h, $opc = false) {
                 if ($this->exist) {
                    $wi = $this->width;
                    $he = $this->height;

                    if ($w) {
                       $wp = $w;
                       $hp = round(($he / $wi) * $wp);
                    }  elseif ($h) {
                       $hp = $h;
                       $wp = round(($wi / $he) * $hp);
                    }

                    $this->createThumb($wp, $hp);
                    $this->reDim(0, 0, 0, 0, $wp, $hp, $wi, $he);

                    if ($opc) return $this->thumb;
                    else return $this->setImg($ruta);
                 }  else return false;
        }

        function makeCuadro($ruta, $w, $h, $opc = false) {
                 if ($this->exist) {
                    if ($w && $h) {
                       $wi = $this->width;
                       $he = $this->height;

                       if ($wi > $w || $he > $h) {
                          if ($wi / $w > $he / $h) {
                             $wp = $w;
                             $hp = round(($he / $wi) * $wp);
                          }  else {
                             $hp = $h;
                             $wp = round(($wi / $he) * $hp);                       
                          }
                       }  else {
                          $wp = $wi;
                          $hp = $he;
                       }

                       $this->createThumb($wp, $hp);
                       $this->reDim(0, 0, 0, 0, $wp, $hp, $wi, $he);

                       if ($opc) return $this->thumb;
                       else return $this->setImg($ruta);
                    }  else return false;
                 }  else return false;
        }

        function makeCorte($ruta, $w, $h, $opc = false) {
                 if ($this->exist) {
                    $wi = $this->width;
                    $he = $this->height;

                    if ($w && $h) {
                       if ($wi / $w < $he / $h) {
                          $wp = $wi;
                          $hp = round(($h / $w) * $wp);
                       }  else {
                          $hp = $he;
                          $wp = round(($w / $h) * $hp);
                       }
                       $lf = round(($wi - $wp) / 2);
                       $tp = round(($he - $hp) / 2);

                       $this->createThumb($w, $h);
                       $this->reDim(0, 0, $lf, $tp, $w, $h, $wp, $hp);

                       if ($opc) return $this->thumb;
                       else return $this->setImg($ruta);
                    }  else return false;
                 }  else return false;
        }

        private function reDim($dstX, $dstY, $srcX, $srcY, $dstW, $dstH, $srcW, $srcH) {
                imagecopyresampled($this->thumb, $this->source, $dstX, $dstY, $srcX, $srcY, $dstW, $dstH, $srcW, $srcH);
        }

        private function setImg($ruta) {
                return imagejpeg($this->thumb, $ruta);
        }
}
if (isset($_GET["img"])) {
   $img = $_GET["img"];
   if (file_exists($img)) {
      $ima = new Imagen($img);
      $tip = $_GET["tip"];
      $w = $_GET["w"];
      $h = $_GET["h"];

      if ($tip == 0) $thumb = $ima->makeThumb("", $w, $h, true);
      if ($tip == 1) $thumb = $ima->makeCuadro("", $w, $h, true);
      if ($tip == 2) $thumb = $ima->makeCorte("", $w, $h, true);

      if ($thumb) {
         header('Content-type: image/jpeg');
         imagejpeg($thumb);
      }  else echo "Error";
   }
}
?>