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

   
Vista:
Imágen de perfil de Iván

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

Publicado por Iván ivanbatiste@gmx.es (9 intervenciones) el 22/08/2015 14:50:02
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.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

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

Publicado por xve (1595 intervenciones) el 23/08/2015 08:24:36
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.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Iván

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

Publicado por Iván (9 intervenciones) el 23/08/2015 21:33:50
Gracias xve. Seguiré investigando.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

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

Publicado por xve (1595 intervenciones) el 24/08/2015 10:50:59
Si encuentras alguna forma, te agradecer que nos lo comentes, ya que he buscado y no he encontrado nada.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

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

Publicado por Vainas (239 intervenciones) el 24/08/2015 18:12:05
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.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema

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

Publicado por txema (25 intervenciones) el 24/08/2015 20:14:07
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.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

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

Publicado por Vainas (239 intervenciones) el 24/08/2015 21:03:33
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.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema

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

Publicado por txema (25 intervenciones) el 24/08/2015 21:40:14
Tienes razón Vainas.

En mi aplicación (adaptada) hay un código previo donde dice(digo):
1
$max = 8388608; // (8 MB)
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.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Iván

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

Publicado por Iván (9 intervenciones) el 24/08/2015 21:48:54
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.

Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

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

Publicado por Vainas (239 intervenciones) el 25/08/2015 00:32:23
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.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Iván

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

Publicado por Iván (9 intervenciones) el 25/08/2015 12:29:09
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...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

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

Publicado por Vainas (239 intervenciones) el 26/08/2015 10:12:58
Buenas:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height;
 
if (width > height) {
  if (width > MAX_WIDTH) {
    height *= MAX_WIDTH / width;
    width = MAX_WIDTH;
  }
} else {
  if (height > MAX_HEIGHT) {
    width *= MAX_HEIGHT / height;
    height = MAX_HEIGHT;
  }
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);

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

1
var dataurl = canvas.toDataURL("image/png");

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.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Iván

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

Publicado por Iván (9 intervenciones) el 26/08/2015 21:37:35
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.

Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

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

Publicado por juan (1 intervención) el 15/01/2016 12:09:10
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/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar