2010-04-29 25 views
16

¿Hay algunos componentes del cliente (jquery/swf) que darán la posibilidad de cargar y recortar (el usuario debe poder seleccionar el área para recortar) una imagen en el navegador y luego enviar la imagen recortada al servidor?Cargar y recortar la imagen antes de enviarla al servidor

Estoy en asp.net-mvc (no estoy seguro si importa)

Respuesta

18

jcrop

Jcrop es la forma más rápida y fácil de agregar funcionalidad a la imagen de cultivo de la aplicación web. Combina la facilidad de uso de un plugin jQuery típico con un poderoso motor de cultivo DHTML multiplataforma que es fiel a las aplicaciones familiares de gráficos de escritorio.

+3

Me gustaría secundar esto. Consulte http://towardsnext.wordpress.com/2009/04/13/crop-image-in-aspnet-using-jcrop-jquery/ para obtener un tutorial que lo use en MVC. –

+5

si jcrop es bueno para recortar, pero tiene que cargar toda la imagen antes de recortarla, me gustaría saber si hay algo que recorta la imagen en el cliente antes de enviarla al servidor – Omu

+0

El lado del cliente de recorte necesitaría algunos tipo de complemento, como Flash o Silverlight (no puedes hacerlo a través de JavaScript). –

9

El complemento de imagen de Jcrop puede ser útil para mostrar la UI de recorte y obtener las coordenadas recortadas en el navegador. Sin embargo, en realidad no recortar la imagen. Por lo tanto, el proceso de recorte se realiza en el servidor, lo que es bastante malo para el rendimiento de su servidor.

La respuesta here introduce una extensión Jcrop el que recorta la imagen en el navegador y lo sube la imagen recortada al servidor. "Utiliza el complemento Jcrop para recortar imágenes, dibuja el área recortada en el elemento canvas de HTML 5, convierte el lienzo en un blob y carga el archivo de imagen al servidor mediante AJAX".

La parte más importante es la función canvasToBlob que convierte el elemento canvas de HTML 5 en un tipo Blob que puede cargarse en el servidor como imágenes. Desafortunadamente, este método solo funciona en AJAX y no puede enviar un formulario directamente, porque el blob no se puede colocar en el elemento de formulario HTML estándar como un archivo de entrada. En realidad, rara vez usamos el formulario para enviar imágenes directamente al recortarlas.

+0

Buen trabajo apuntar a la respuesta correcta, pero simplemente vincular sin su contribución no es una respuesta, mejor actualizar su respuesta para agregar detalles o bien agregar esto como comentario a la pregunta y eliminar esta respuesta – Ram

4

Necesita combinar una interfaz de usuario de recorte con una herramienta de carga para completar esta compleja tarea. La interfaz de usuario de recorte es responsable de mostrar la UI de recorte y proporcionar las coordenadas de recorte, y los cultivos de carga ascendente & cambian el tamaño de la imagen, la convierten en un blob y lo cargan en un servidor.

La UI de recorte es común, pero la carga es difícil de encontrar. Recomiendo el recorte UI ImgAreaSelect que es fácil de usar y este Uploader que es simple y extensible pero no es gratis.

Cuestiones relacionadas