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.
