entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Redimensionar imagen con javascript o jquery antes de subirla

Saludos a todos.

Tengo un problema para el cuál no encuentro solución, posiblemente porque es muy específico, aparte de por mi falta de experiencia. Tengo un formulario de envío de imagen. Antes de enviar la imagen uso el plugin de jQuery: jCrop, para tomar unas coordenadas de recorte y enviarlas al servidor junto con la imagen. De esta manera recorto, redimensiono y realizo varias copias de la imagen en el servidor. El problema es que si la imagen es demasiado grande se me sale de la pantalla cuando uso el plugin para obtener las coordenadas de recorte. Si redimensiono la imagen con css, el plugin no funciona correctamente. He pensado también en restringir el tamaño máximo de la imagen para que ésta sea envíada, pero sería demasiado pequeña, y después de que el usuario pruebe varias veces puede terminar dándose por vencido y abandonar la web. Entonces esta última alternativa me gustaría dejarla por si no encuentro otra solución.

Mi duda es si conocéis alguna función o funciones javascript o plugin jQuery que me permita redimensionar la imagen en el cliente, mostrarla ya redimensionada para poder aplicar el plugin jCrop (para que así las coordenadas de recorte obtenidas sean correctas) y asignar esa misma imagen redimensionada al <input type="upload"> para que sea esa la que envíe. No sé si me explico claramente. Supongo que si se puede habrá que usar algún tipo de encriptado y desencriptado de imágenes, como base64.

Bueno, muchas gracias con antelación antes de nada, y espero vuestras posibles soluciones si se os ocurre alguna. He de decir también que cada vez que pregunto algo aquí aprendo muchísimo :)

PD: Como lenguaje del lado del servidor uso PHP (CodeIgniter) y en el cliente uso jquery y less. No creo que sea información importante para la duda que planteo, pero lo pongo por si acaso.

2 Respuestas

3votos

white Puntos75880

Según la documentación de Jcrop, puedes utilizar las opciones trueSize, boxWidth y boxHeight:

http://jcrop.org/doc/options


$('#crop-img').Jcrop({
    aspectRatio: 1,
    boxWidth: anchoCaja,
    boxHeight: altoCaja,
    trueSize: [anchoReal, altoReal],
    onSelect: function(coords)
    {
        console.log(coords)
    }
});

de modo que la imagen se mostraria con el tamaño anchoCaja x altoCaja pero las coordenadas son tratadas con las dimensiones definidas en trueSize.

0voto

Joseda85 comentado

Muchas gracias. Es justo lo que necesitaba :D

4votos

dairon Puntos17140

En este árticulo @white y @Leonardo-Tadei explican el proceso y ponen unos códigos muy buenos que redimencionan imágenes en php con codeigniter: Cambiar Tamaño de Imágen al Subir a lo mejor algo de eso te sirve.
Saludos Dairon

0voto

Joseda85 comentado

Le he echado un vistazo y está interesante. Pero esa parte ya la tengo hecha. El problema que tenía era que como previsualizo la imagen antes de enviarla, si la imagen es demasiado grande se sale de la pantalla. Pero ya me ha solucionado el problema el compañero @white. Aún así en ese enlace hay algunas mejoras que puedo realizar. Así que muchas gracias también :)

0voto

dairon comentado

@white me ha ayudado un montón de veces jejeje incluso el link que te compartí son dos respuesta una de el y otra de @Leonardo-Tadei. Saludos Dairon

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta