modificar - Cambiar el tamaño de la imagen por Javascript
modificar imagen con javascript (1)
Una solución es utilizar formas modernas como FileReader y Canvas (pero esto solo funciona con los últimos navegadores modernos).
En este ejemplo, muestro cómo dejar que el cliente cambie el tamaño de una imagen antes de subirla configurando una relación de aspecto de ancho y alto máx.
En este ejemplo max widthHeight = 64; su imagen final es c.toDataURL ();
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var h=function(e){
var fr=new FileReader();
fr.onload=function(e){
var img=new Image();
img.onload=function(){
var MAXWidthHeight=64;
var r=MAXWidthHeight/Math.max(this.width,this.height),
w=Math.round(this.width*r),
h=Math.round(this.height*r),
c=document.createElement("canvas");
c.width=w;c.height=h;
c.getContext("2d").drawImage(this,0,0,w,h);
this.src=c.toDataURL();
document.body.appendChild(this);
}
img.src=e.target.result;
}
fr.readAsDataURL(e.target.files[0]);
}
window.onload=function(){
document.getElementById(''f'').addEventListener(''change'',h,false);
}
</script>
</head>
<body>
<input type="file" id="f">
</body>
</html>
En el lienzo parte del código también puede agregar una función de recorte.
Editar como se le pidió en los comentarios
c.toDataURL();
es la imagen base64_string puede almacenarlo en una entrada oculta, agregar a un new FormData() o donde quiera.
en el servidor
$data=explode('','',$base64_string);
$image=base64_decode($data[1]);
escribir en un archivo
$f=fopen($fileName,"wb");
fwrite($f,$image);
fclose($f);
o
$gd=imagecreatefromstring($image);
también puede almacenar toda la cadena de imágenes base64 en la base de datos y usarla siempre.
Tengo una aplicación web ejecutándose. Y usa ajax upload. El problema es que recientemente los usuarios están cargando imágenes demasiado grandes. Entonces tomará un poco más de tiempo. Los usuarios se están quejando de eso. Entonces, lo que estaba pensando es esto: ''Si de alguna manera recorto y cambio el tamaño de la imagen a través de js y luego la envío al servidor a través de la carga ajax, entonces el tiempo se reducirá''. Entonces, ¿hay alguna manera de hacer eso? Alguna idea para eso?