redimensionar una imagen antes de subir web

ManelGomez · #1 (**permalink**) 09/10/2011, 14:23

Hola a todos:

Con javascript redimensiono una imagen a los pixeles deseados.

Código PHP:

   
function cargarArchivo() { 
  if(document.anc.carga.value=="") 
      alert("No hay dirección del archivo a mostrar"); 
  else 
    document.im.src=document.anc.carga.value  
} 
 
function cargarImagen(img) { 
  document.im.src=img.options[img.selectedIndex].value; 
} 
 
 
 
 
<table> 
 <form name="anc" > 
 <b>Imagen desde archivo:  
 <input type="file" name="carga" value=""/> 
 <input type="button" value="Ver" onclick="cargarArchivo();"/> 
Ancho:  
 <select name="ancho" onChange ="Ajustar(this)" >  
  <option value="80"> No definido 
  <option value="480"> 480 pixeles 
  <option value="640"> 640 pixeles 
  <option value="800"> 800 pixeles 
  <option value="">Tamaño Real 
</select> 
Alto: <select name="alto" onChange ="Ajustar2(this)">  
  <option value="80"> No definido  
  <option value="400"> 400 pixeles 
  <option value="640"> 640 pixeles 
  <option value="800"> 800 pixeles 
  <option value="">Tamaño Real 
 </select> 
 </form> 
 </td> 
 </tr> 
</table> 
 
<table> 
   <tr> 
    <td> 
        <img src="" name="im" id="im" alt="Aquí se muestra la imagen"/> 
</td> 
</tr> 
</table>

Al final tienes un objeto de un documento.

Ahora es cuando ese objeto hay que subirlo al hosting.

Alguien se se atreve a seguir.

Un Saludo.

Artificium · #2 (**permalink**) 09/10/2011, 14:30

Con JavaScript no se puede manipular el peso o las dimensiones reales de un archivo, solo se puede modificar la apariencia, y no de un archivo que está por subirse. Tú código no lleva a nada. La pregunta es cómo hacerlo entonces? Se me ocurren una manera y una manera que a mí mismo no me gusta, ya que voy a plantearte el uso de applets. Hay dos razones para que esa solución no me guste a mí ni a otros. La primera razón es que es muy común hallar terminales los que no se pueda usarlos porque no está instalado el JRC o el plugin adecuado. En segundo lugar porque no es tan fácil programar un applet. Lo único que te puedo decir al respecto es que con un applet podrías redimensionarlo y luego cargarlo mediante FTP. Tengo un applet FTP que puedo facilitar libremente, pero mi applet no redimensiona, así que no te sirve. Suerte!

ManelGomez · #3 (**permalink**) 09/10/2011, 16:52

Gracias.

Eso, gracias por tu voluntad. bien el javascript instaldo se podria sacar con un mensaje el usuario de que lo instale o habilite, pero lo que javascript solo modifica la apariencia no lo sabia, entonces eso lo que dices tú no conduce a nada.

Pero podria haber alguna forma de volcar a un fichero el contendio de un objeto. Bueno igual hay algo .......

De todas formas hay una http://www.resizeyourimage.com/ que hay que ver como lo gestiona.

Un Saludo.

ManelGomez · #4 (**permalink**) 09/10/2011, 16:56

Esta es mejor

http://www.resize-before-upload.com/

caricatos · #5 (**permalink**) 09/10/2011, 17:35

Hola:

Como comenta Artificium, con javascript no se puede hacer nada... y si te engañan con páginas maravillosas, habrá otras tecnologías.

Muchas páginas muestran imágenes locales en el servidor... incluso yo hice este artículo: Revisar las imágenes antes de subirlas, pero las imagenes realmente son subidas... y en los servidores sí que se pueden modificar.

Saludos

Panino5001 · #6 (**permalink**) 10/10/2011, 00:18

Bueno, en html 5 puede usarse el objeto FileReader combinado con canvas para lograr ese objetivo. El problema es que, pese a que la mayoría de los navegadores modernos soportan FileReader y canvas, antiguas versiones de Explorer no los soportan.
Un ejemplo:

Código:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function $(x){return document.getElementById(x);}
onload=function(){
	$('archivo').addEventListener('change',previsualizar,false);
}
function redimensionar(im,maxWidth,maxHeight){
	var i=new Image();
	i.onload=function(){
		var w=this.width,
		h=this.height,
		scale=Math.min(maxWidth/w,maxHeight/h),
		canvas=document.createElement('canvas'),
		ctx=canvas.getContext('2d');
		canvas.width=w*scale;
		canvas.height=h*scale;
		ctx.drawImage(i,0,0,w*scale,h*scale);
		$('redimensionada').innerHTML='<img src="'+canvas.toDataURL()+'">';
		$('base64Redimensionada').innerHTML=canvas.toDataURL();
		
	}
	i.src=im;
}
function previsualizar(e){
	var input=e.target,fr=new FileReader(),
	tipos=/^image\/jpg|image\/jpeg|image\/png|image\/gif$/i;
	if(input.files.length===0)return;
	if(!tipos.test(input.files[0].type)){alert("El archivo selecionado es inválido");return;}
	fr.onload=function(evt){
		var im=evt.target.result;
		$('original').innerHTML='<img src="'+im+'">';
		redimensionar(im,100,100);
	}
    fr.readAsDataURL(input.files[0]);
	
	
	
}
</script>
</head>

<body>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
    <input type="file" name="archivo" id="archivo" />
</form>
<div id="original"></div>
<div id="redimensionada"></div>
<div id="base64Redimensionada"></div>

</body>
</html>

Si comparamos el peso de ambas imágenes veremos que son diferentes, siendo la redimensionada más liviana que la original. En cualquier momento es posible guardar la imagen redimensionada en el servidor (podemos dejarla en base64 o, en el servidor, pasarla por un base64_decode, agregarle el content-type que querramos y guardarla en el directorio que querramos). Todo el proceso de redimensión se hizo en el cliente sin uso de Flash, ActiveX o applets. Sólo javascript.

ManelGomez · #7 (**permalink**) 16/10/2011, 11:54

Hola panino:

Voy a estudiar el código propuesto.

Respeto a caricatos y Artificium en afirmar que con javascript no se puede hacer nada, pero al final deja una puerta abierta al decir que habra otras tecnologias.

Un salu2.

ManelGomez · #8 (**permalink**) 16/10/2011, 12:45

Hola panino:

El código lo ejecuto, pero no veo los resultados. no veo la redimensionada, original o la base64. Algo debo hacer mal.

Un Saludo.

Panino5001 · #9 (**permalink**) 16/10/2011, 19:21

Puede ser que hayas hecho algo mal o que estés probando en un navegador que no tenga soporte o que estés intentando verlo fuera de un servidor web (en algunos navegadores como Chrome es necesario correrlo en un servidor web para que funcione).

caricatos · #10 (**permalink**) 17/10/2011, 08:02

Hola:

Me parece interesante que desde el navegador se pueda modificar la imagen, pero lo que no tengo nada claro es que se pueda subir ya modificada... tal vez en un "hidden" volcar esos datos; pero ya dejaría de tener sentido el doctype.

Tema realmente interesante.

Saludos

Edito: quise decir enctype