Foros del Web » Creando para Internet » Diseño web »

Auto ajustar el tamaño de imagen

Estas en el tema de Auto ajustar el tamaño de imagen en el foro de Diseño web en Foros del Web. Como se puede auto ajustar el tamaño de las fotos en: javascript, php, html Lo que necesito hacer es él lo siguiente Tengo mi sitio ...
  #1 (permalink)  
Antiguo 17/07/2009, 18:35
(Desactivado)
 
Fecha de Ingreso: enero-2008
Mensajes: 272
Antigüedad: 16 años, 3 meses
Puntos: 1
Auto ajustar el tamaño de imagen

Como se puede auto ajustar el tamaño de las fotos en: javascript, php, html

Lo que necesito hacer es él lo siguiente

Tengo mi sitio web, donde se puede publicar todo tipo de artículo, los clientes subiendo sus artículos para publicar en mi sitio web, pero generalmente suben la imagen grande o a veces muy chico, no podría definirá esto en la imagen width="100" height="100", porque, si el cliente sube supongamos 60x50 px, se distorsiona la imagen si defino 100x100 y además quiera saber si hay alguna función que pueda bajar de peso, los clientes suben muy pesados

Por favor alguna sugerencia,

Muchas gracias
  #2 (permalink)  
Antiguo 17/07/2009, 22:15
 
Fecha de Ingreso: julio-2009
Mensajes: 21
Antigüedad: 14 años, 9 meses
Puntos: 0
Respuesta: Auto ajustar el tamaño de imagen

PHP tiene funciones en la libreria GD, para modificar la resolucion de una imagen, o bien, la mas sencilla, mediante un if, es posible rechazarla si excede cierto tamaño el archivo a subir.

Saludos
  #3 (permalink)  
Antiguo 20/07/2009, 15:24
(Desactivado)
 
Fecha de Ingreso: enero-2008
Mensajes: 272
Antigüedad: 16 años, 3 meses
Puntos: 1
Respuesta: Auto ajustar el tamaño de imagen

Cita:
Iniciado por El_Sensei_Sherman Ver Mensaje
PHP tiene funciones en la libreria GD, para modificar la resolucion de una imagen, o bien, la mas sencilla, mediante un if, es posible rechazarla si excede cierto tamaño el archivo a subir.

Saludos
Gracias por responder,

Sería fácil poner una condición para que no suban archivo muy pesados, pero los clientes no saben algunos bajar el peso de la imagen, ni el tamaño, me gustaría que ver si hay alguna manera de que pueda ayudar al cliente, dar una solución a este problema.

Por favor cualquier sugerencia
Muchas gracias
  #4 (permalink)  
Antiguo 20/07/2009, 15:54
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 17 años, 1 mes
Puntos: 67
Respuesta: Auto ajustar el tamaño de imagen

Bueno, podrías usar la clase que te estoy dejando, mediante esta se puede redimensionar las fotos de distintos modos: puedes crear una imagen definiendo solo el ancho o el alto y la otra dimensión se autoajusta proporcionalmente (método makeThumb). También puedes crear una imagen que no exceda unas medidas determinadas, el resutado también es proporcional a la imagen inicial (método makeCuadro). Asimismo puedes crear un corte, con esta opción puedes crear una imagen con unas medidas determinadas y no deformará la imagen.

Mi sugerencia es crear el nuevo archivo cuando el cliente haya cargado la foto, espero que te sirva.

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(0000$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(0000$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(00$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$htrue);
      if (
$tip == 1$thumb $ima->makeCuadro(""$w$htrue);
      if (
$tip == 2$thumb $ima->makeCorte(""$w$htrue);

      if (
$thumb) {
         
header('Content-type: image/jpeg');
         
imagejpeg($thumb);
      }  else echo 
"Error";
   }
}
?>
  #5 (permalink)  
Antiguo 02/08/2009, 02:11
(Desactivado)
 
Fecha de Ingreso: enero-2008
Mensajes: 272
Antigüedad: 16 años, 3 meses
Puntos: 1
Respuesta: Auto ajustar el tamaño de imagen

MUCHAS GRACIAS POR TU TIEMPO

Te cuento que no le entiendo mucho la clase no se como implementar a mi programación

Trate de implementar pero me sale un error

Fatal error: Call to a member function makeThumb() on a non-object in C:\wamp\www\el_sitio_de_negocios\sistema\productos \nuevo.php on line 30


Por favor podrias indicarme como debo implementar muchas gracias

Aqui te paso mi formulario con escript que sube la imagen al servidor
Código PHP:
<?php
    
require_once('../controla/controla_sesion.php');
    
    require_once(
"class_imagen.php");
    require_once(
'class_productos.php');
    
$categ=new producto();
    
$rs_categoria=$categ->ListarCategoria();
    
$rsformapago=$categ->ListarForma();
    if(isset(
$_POST['grabar']))
    {
        
$categ->CargarCamposArticulo();
        
$id=$categ->InsertArticulo();
        
        
//Para subir imagen chica
        
if($_FILES['fotochicha1']['name']!=NULL)
        {
           
$archivo=$_FILES['fotochicha1']['name'];
            
$posicion strrpos($archivo,'.')+1;
            
$extension =  substr($archivo,$posicion);
            
$varchivo=$id.'c1.'.$extension;
                
             if(
$extension!='exe')
             {
                
move_uploaded_file($_FILES['fotochicha1']['tmp_name'],"../achivos/".$varchivo);
                
chmod("../achivos/$varchivo",0644); 
                
                
/*AQUI INTENTO MANDAR LOS PARÁMETOS A LA FUNCIÓN DE LA CLASE PER NO FUNCIONA ME ERORR */
                
$ima->makeThumb("../achivos/$varchivo"9090$opc false);
             }
            
$categ->ActualizarArchivo1($varchivo,$id);
        }
        
//Para subir imagen 1 grande
        
if($_FILES['fotogrande1']['name']!=NULL)
        {
           
$archivo=$_FILES['fotogrande1']['name'];
            
$posicion strrpos($archivo,'.')+1;
            
$extension =  substr($archivo,$posicion);
            
$varchivog1=$id.'g1.'.$extension;
                
             if(
$extension!='exe')
             {
                
move_uploaded_file($_FILES['fotogrande1']['tmp_name'],"../achivos/".$varchivog1);
                
// chmod, da permiso al archivo imagen
                
chmod("../achivos/$varchivog1",0644); 
                
/*AQUI INTENTO MANDAR LOS PARÁMETOS A LA FUNCIÓN DE LA CLASE PER NO FUNCIONA ME ERORR */
                
$ima->makeCuadro("../achivos/$varchivog1"540$h$opc false);
             }
            
$categ->ActualizarArchivo2($varchivog1,$id);
        }
        
//Para subir imagen 2 grande
        
if($_FILES['fotogrande2']['name']!=NULL)
        {
           
$archivo=$_FILES['fotogrande2']['name'];
            
$posicion strrpos($archivo,'.')+1;
            
$extension =  substr($archivo,$posicion);
            
$varchivog2=$id.'g2.'.$extension;
                
             if(
$extension!='exe')
             {
                
move_uploaded_file($_FILES['fotogrande2']['tmp_name'],"../achivos/".$varchivog2);
                
chmod("../achivos/$varchivog2",0644);
             }
            
$categ->ActualizarArchivo3($varchivog2,$id);
        }
        
        
//Para subir imagen 3 grande
        
        
if($_FILES['fotogrande3']['name']!=NULL)
        {
           
$archivo=$_FILES['fotogrande3']['name'];
            
$posicion strrpos($archivo,'.')+1;
            
$extension =  substr($archivo,$posicion);
            
$varchivog3=$id.'g3.'.$extension;
                
             if(
$extension!='exe')
             {
                
move_uploaded_file($_FILES['fotogrande3']['tmp_name'],"../achivos/".$varchivog3);
                
chmod("../achivos/$varchivog3",0644);
             }
            
$categ->ActualizarArchivo4($varchivog3,$id);
        }
        
header("Location:../index.php?cdg=1"); 
    }
?>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data" name="form1" style="padding:10px;">
  <div id="tabla" style="padding-top:10px; padding-bottom:5px;"> 
  <div id="titulo" align="left">Agrega fotos</div> 
  </div>
  <table width="580" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="TituloContenido"  style=" padding:5px;">Foto chica <samp class="contenido">(de ancho 100px m&aacute;ximo) </samp>
      <input name="fotochicha1" type="file" class="contenido" id="fotochicha1"></td>
    <td class="TituloContenido"  style=" padding:5px;">
    Foto grande <samp class="contenido">(de ancho 450px m&aacute;ximo) </samp>
    
    <input name="fotogrande1" type="file" class="contenido" id="fotogrande1"></td>
   
  </tr>
</table>
 <div id="f2" >
<table width="580" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="TituloContenido"  style=" padding:5px;">Foto grande <samp class="TextoContenidoAzul">(de ancho 450px máximo) </samp>
    <input name="fotogrande2" type="file" class="contenido" id="fotogrande2"></td>
    <td class="TituloContenido"  style=" padding:5px;">Foto grande <samp class="TextoContenidoAzul">(de ancho 450px máximo) </samp>
      <input name="fotogrande3" type="file" class="contenido" id="fotogrande3"></td>
   
  </tr>
</table>
</div>
  <div id="tabla" style="padding-top:5px; padding-bottom:5px;"> 
  <div id="titulo" align="left">Ingresa los datos de la venta</div> 
  </div><table width="580" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="164" align="right" class="TituloContenido" style=" padding:10px;">Título <samp class="TextoContenidoRojo">*</samp></td>
    <td colspan="3"><input name="v_titulo" type="text" class="contenido" id="v_titulo" size="50"></td>
  </tr>
  <tr>
    <td class="TituloContenido" align="right" style=" padding:10px;">Cantidad <samp class="TextoContenidoRojo">*</samp></td>
    <td colspan="3"><input name="cantidad" type="text" class="contenido" id="cantidad" value="1" size="4">
    <samp class="contenido">Ingresa las unidades que deseas vender </samp>    </td>
  </tr>
  <tr>
    <td class="TituloContenido" align="right" style=" padding:10px;">Precio de venta  <samp class="TextoContenidoRojo">*</samp></td>
    <td colspan="3"><select name="moneda" class="contenido" id="moneda">
      <option value="0">Moneda</option>
      <option value="1">$us</option>
      <option value="2">Bs</option>
      <option value="3">Sin precio</option>
    </select>
      <input name="precio" type="text" class="contenido" id="precio" size="10"></td>
  </tr>
  <tr>
    <td class="TituloContenido" align="right" style=" padding-right:10px;">Tiempo de publicaci&oacute;n <samp class="TextoContenidoRojo">*</samp></td>
    <td width="114">
      <select name="tiempo" class="contenido" id="tiempo" onChange="CalcularElMonto();">
      <option value="0">Seleccione</option>
      <option value="1">1 Mes</option>
      <option value="2">2 Meses</option>
      <option value="3">3 Meses</option>
      <option value="4">4 Meses</option>
      <option value="5">5 Meses</option>
      <option value="6">6 Meses</option>
      <option value="12">1 Año</option>
    </select></td>
    <td width="150" class="TituloContenido" align="right" style=" padding-right:10px;"><!--Importe a pagar $us: --></td>
    <td width="152"><input name="importe_apagar" type="hidden" class="contenido" id="importe_apagar" value="0" size="6" readonly="true" /></td>
  </tr>
</table>
<div id="tabla" style="padding-top:10px; padding-bottom:10px;"></div>
  
 <table width="580" border="0" cellspacing="0" cellpadding="0">
<tr><td width="130" class="TituloContenido">Estado del artículo <samp class="TextoContenidoRojo">*</samp></td>
<td width="20"><input name="estado_articulo" id="estado_articulo" type="radio" value="1" ></td>
<td width="80" class="contenido">Nuevo</td>
<td width="20"><input name="estado_articulo" id="estado_articuloestado_articulo" type="radio" value="2"></td>
<td width="80" class="contenido">Usado</td>
<td width="20"><input name="estado_articulo" id="estado_articulo" type="radio" value="3" checked="checked"></td>
<td width="100" class="contenido">Sin especificar</td>
</tr></table><table width="580" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="TituloContenido" style=" padding:10px;">Descripción <samp class="TextoContenidoRojo">*</samp></td>
  </tr>
  <tr>
    <td><textarea name="descripcion" cols="85" rows="10" class="contenido" id="descripcion"></textarea></td>
  </tr>
  
</table>
<div id="tabla" style="padding-top:10px; padding-bottom:10px; display:none"> 
  <div id="titulo" align="left">Formas de pago, por cargo de publicación <samp class="TextoContenidoRojo">*</samp></div> 

<?php
    
while($filafp=mysql_fetch_array($rsformapago))
    {
    
?>
        <table width="580" border="0" cellspacing="0" cellpadding="0" style="padding-top:4px;">
  <tr>
      <td width="31"><input name="idformapago" id="idformapago" type="radio" value="<?php echo $filafp['id'];?>" onclick="PasarIdFormaPago(<?php echo $filafp['id'];?>);">
        </td>
    <td width="313" class="contenido" style=" padding:2px;"><?php echo $filafp['titulo'];?></td>
    <td width="216">
    <?php
        
if($filafp['imagen']!=NULL)
        {
    
?>
    <img src="images/<?php echo $filafp['imagen'];?>" border="0">
    <?php
        
}
    
?>    </td>
  </tr>
    </table>

    <?php
    
}
    
mysql_free_result($rsformapago);
?>
</div>
<input name="forma_pago" type="hidden" id="forma_pago" value="0" />
<input name="idcliente" type="hidden" id="idcliente" value="<?php echo $_SESSION['idcliente'];?>" />
<div style="padding:5px;" align="center">
<input name="grabar" type="submit" id="grabar" value="Registrar" onmousedown="ValidarCamposArticulos();">
</div>
</form>
  #6 (permalink)  
Antiguo 04/08/2009, 06:29
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 17 años, 1 mes
Puntos: 67
Respuesta: Auto ajustar el tamaño de imagen

Claro, el problema es que no pongo ningún comentario en el código. No voy a revisar tu código porque eso sería "servirte el pescado", mejor te enseño como usar la caña que fabriqué. Bien:

Cuando uses una clase en PHP primero tienes que inicializarla, en este caso sería así:

$img = new Imagen($ruta);

Donde $ruta es la ruta de la imagen (valga la redundancia), ruta relativa por si acaso. Ahora para crear un thumb, o sea una imagen de menor tamaño se procede a hacer lo siguiente:

$img->makeThumb($rutaThumb, $ancho, $alto);

El parámetro $opc es opcional y es boleano, o sea, verdadero o falso, si lo incluyes con el valor verdadero (true) serviría no para crear un archivo sino para mostrarlo en línea, pero ese no es tu caso. Bueno.

El método makeThumb crea un nuevo archivo y lo guarda en el disco, si quieres que la imagen tenga una ancho determinado y el alto se calcule automáticamente haz algo así:

$img->makeThumb($rutaThumb, 100, 0);

Ahora que lo veo eso está mal (me refiero a mi código) porque el tercer parámetro también debería tener un valor por defecto para que sea opcional, corregiré eso.

Bueno, si quieres crear una imagen que no sobrepase un ancho y un alto determinado usa el método makeCuadro del mismo modo como se usa el anterior método. Y si quieres que se haga un corte con un ancho y alto determinado y que abarque la mayor área posible de la imagen pues usa el método makeCorte.

Espero que me haya sabido explicar bien, voy a corregir lo que detecté y también voy a comentar cada método. Te recomiendo que revises manuales de PHP orientado a objetos, así podrás usar cantidad de clases que existen por ahí sueltas y que te podrían ahorrar el trabajo bastante. Claro, la desventaja está en que podrían hacer lento el procesamiento, pero de hecho que sirven. Suerte!

Última edición por ElJavista; 04/08/2009 a las 12:57
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:41.