react - title html español
Cargar y recortar la imagen antes de enviarla al servidor (3)
Debe combinar una IU de recorte con un cargador para completar esta tarea compleja. La IU de recorte es responsable de mostrar la IU de recorte y de proporcionar las coordenadas de recorte, y el cargador recorta y cambia el tamaño de la imagen, la convierte en un blob y la carga en un servidor.
La IU de recorte es común, pero el cargador es difícil de encontrar. Recomiendo la interfaz de usuario ImgAreaSelect recorte que es fácil de usar y este Uploader que es simple y extensible pero no es gratuito.
¿Hay algunos componentes del cliente (jquery / swf) que darán la posibilidad de cargar y recortar (el usuario debería poder seleccionar el área para recortar) una imagen en el navegador y luego enviar la imagen recortada al servidor?
Estoy en asp.net-mvc (no estoy seguro si importa)
El complemento de imagen Jcrop puede ser bueno para mostrar la IU de recorte y obtener las coordenadas recortadas en el navegador. Sin embargo, en realidad no recorta la imagen. Por lo tanto, el proceso de recorte se realiza en el servidor, lo cual es bastante malo para el rendimiento de su servidor.
La respuesta here introduce una extensión Jcrop que recorta la imagen en el navegador y carga la imagen recortada en el servidor. "Utiliza el complemento Jcrop para recortar imágenes, dibuja el área recortada en el elemento de lienzo 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 de lienzo HTML 5 en un tipo de Blob que se puede cargar 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 cuando las recortamos.
Jcrop es la forma rápida y sencilla de agregar la funcionalidad de recorte de imágenes a su aplicación web. Combina la facilidad de uso de un complemento jQuery típico con un potente motor de corte DHTML multiplataforma que es fiel a las aplicaciones de gráficos de escritorio familiares.