JavaScript - Reducir el tamaño de mis imágenes antes de subirlas al servidor...

Hola amigos, que tal? Bueno, contento con el foro, no dudo en volver a recurrir a el. Es una tormenta de hace varios meses, mediante una aplicación casi chat, envío archivos de imagen, que después quedan publicados en la web, pero parece ser que hasta un total de archivos de 5MB. Lo cual, las imágenes grandes pesan mucho y no las puedo subir. Tengo que utilizar otro programa para hacerlas pequeñas. ¿Sería posible re-dimensionar el tamaño de la imagen con javascript?
Gracias y un saludo.

Hola Iván, hasta donde yo se, se puede cambiar el tamaño de visualización en el navegador, pero no el tamaño real de la imagen.

Gracias xve. Seguiré investigando.

Si encuentras alguna forma, te agradecer que nos lo comentes, ya que he buscado y no he encontrado nada.

Buenas:

Si que hay formas. Por lo visto el tema es meter la imagen dentro de un canvas y redimencionarla dentro del mismo.... Os paso un enlace (lo he visto a medias pero se entiende que lo que hacen es eso): https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/ OJO a la fecha que es del 2011....

Y segun otro foro aqui una libreria que puede hacer algo de eso: http://www.plupload.com/

Si haces pruebas, si puedes, comentalo aqui en el foro que sera interesante saber como funciona.

Saludos.

Si de lo que se trata es de modificar el tamaño al subir la imagen (recuerden que es mejor reducir que ampliar, siempre), vean

http://casamadrugada.net/tutoriales/php/como-cambiar-el-tamano-a-una-imagen-con-php-y-libreria-gd/

Es puro PHP.
(Los méritos a quien los publica. Yo he podido desarrollar los códigos que se exponen con excelente resultado.

Si Txema el problema aqui que creo que exponen es que el servidor tendra algun limite de 5mb por archivo asi que el servidor le tira algun error posiblemente cuando el tamaño es mayor asi que tiene que ser antes de que lleguen al mismo. De todas formas que nos aclare la duda Iván

De todas formas me gusta tu link, parece todo bien explicado hasta trabaja con los MIME de los archivos. GD creo que viene de normal compilada con php asi que podria usarse sin problemas siempre.

Saludos.

Tienes razón Vainas.

En mi aplicación (adaptada) hay un código previo donde dice(digo):
que evidentemente puedo modificarlo a otros pesos de imagen.
El código previo es más extenso pero adaptarlo al caso me llevaría un tiempo.

Evidentemente se trabaja el peso original en el Host (temporal) antes de adaptar el nuevo tamaño

El resultado final reduce tamaños y pesos de imagen.

En todos los casos, la aclaración la tiene Ivan.

P.D.: Decía que lo he probado con excelentes resultados.

Gracias por responder, estudiaré las respuestas los próximos días. En realidad el servidor tiene un máximo de 5mb de peso por archivo, así que la imagen ya tiene que pesar menos antes de subirla. He comparado tamaños y peso de imágenes, y me he dado cuenta que para llegar a ese peso, ya son imágenes verdaderamente grandes. Pero en la aplicación (tipo chat) en cuanto la foto supera ese peso, no la carga. Además, me es innecesario que sea superior, el tamaño, al que carga en el documento .html
Resumiedo, me interesa reducir la imagen, antes de subirla al servidor o que se re-dimensione, para que el cliente se le rechace esa imagen o tenga que hacer otra. Vamos que se re-dimensiones automáticamente y luego se aloje.
Bueno, cuando acabe de probarlo les enseño.
Un saludo.

Ahora tengo una duda.

¿Es tu host algo gratuito o asi y por eso te imponen la subida limitada?

Puedes modificar parametros en el php.ini de alguna forma? Si es asi podrias cambiar el tamaño de los archivos que suben:

; Maximum allowed size for uploaded files.
upload_max_filesize = 40M

; Must be greater than or equal to upload_max_filesize
post_max_size = 40M

Tienes esos dos parametros para probar.

Por otro lado txema me hizo pensar que no se si existe algun WS o un Restfull service en el que le pases la foto y te la envie al servidor de alguna forma, por ajax la envias por ejemplo y te la deja en algun link que luego puedas descargas desde el servidor.... algo tiene que existir.

Saludos.

Si vainas, es un host gratuito, por eso es limitado.

Bueno, casi ya lo tengo, investigando he hallado este vídeo.

Me funciona el ejemplo perfecto, pero le pongo una imagen y no el dibujo de los cuadros(del ejemplo del vídeo), y me sube una foto medio cargada, eso sí, reducida al tamaño del canvas.

No se si me explico, este es el resultado;
http://1drv.ms/1Uaz6yD
la foto antes de insertarla en el canvas es de 1000px x 1000px, el tamaño canvas es de 150px x 150px, y el de la foto pintada en el, 140px x 140px con un pequeño margen de 5px.

La subida es con Ajax pero no la acaba de pintar no se donde, en el cliente o en el servidor.

El vídeo del ejemplo es el siguiente, le podéis echar un vistazo y probar.

Espero vuestros consejos, un saludo.

Estoy desesperado...

Buenas:

has mirado el link que te pase? Es que alli te dicen como redimencionar la image. Mira el ejemplo:


antes has tenido que cargar la imagen en img y despues la envias como dice mas abajo:


y luego envias eso por ajax.

Yo ahora el problema que le veo a esto es que he leido que tampoco es que se reduce el tamaño que se envia. El paso de el png a base64 que es lo que hace toDataURL tampoco es que le quite peso y en muchos casos le agrega.... asi que igual podemos seguir tenindo el mismo fallo. tampoco veo que exista una manera de calcular el tamaño en megas o kilobytes que va a quedar la misma....

Si encuentro otra info la pondre por aqui. Esto es lo que tengo de momento.

Saludos.

Vainas todo bien, el problema es que sube la foto a medias, bajo de peso y de tamaño, pero no la sube la foto entera.

En la 8 intervención, muestro el resultado que sube al servidor, mediante ajax.

Seguiré probando con otras imágenes haber el comportamiento.

Saludos y gracias.




P.D.: Mi enhorabuena por el cambio del editor y sus nuevas funciones.

Mira este enlace..

Se que posteaste esto hace rato pero puede ayudar... lo acabo de encontrar buscando el mismo tema y lo voy a probar.. pero si lo podes probar antes pues mejor... ;)

http://blog.jonaszamora.es/reducir-una-imagen-antes-de-subirla-via-canvas/