Question

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.

Answer 1

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.

Answer 2

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