Combinación de rotación y recorte de imagen en jQuery

Actualmente tenemos un sistema para recortar imágenes que usa jCrop en el front-end y System.Drawing en .NET en el back-end: esto funciona muy bien, pero ahora necesitamos introducir rotación de imagen. Solo se necesitan ángulos de 90 grados, y jQuery.Rotate funciona bien de forma aislada, pero me gustaría combinar estos dos plugins jQuery con elegancia. ¿Tienes alguna experiencia en esta área? ¿Hay soluciones "shake & bake"?Combinación de rotación y recorte de imagen en jQuery

Fuente

2009-09-17 Daniel Schierbeck

¿Puede proporcionar más detalles sobre lo que está tratando de lograr? ¿Desea que el usuario defina un rectángulo de recorte y defina un ángulo de rotación al mismo tiempo? ¿Cuál es el resultado visual exacto que estás tratando de lograr? –

Hola Ates, Estoy tratando de tener una vista única de la imagen, con una barra de herramientas que permite rotar y recortar la imagen en un solo paso combinado. –

creo jQuery tubería de revestimiento es la respuesta para cualquier plugin de jQuery

por ejemplo:

$("image").rotate(foo).crop(foo);

Fuente

2009-09-17 11:15:56

Me temo que esto no funcionará. Tanto jCrop como jQuery-Rotate realizan cambios sustanciales en el DOM; necesitan integrarse de alguna manera. Como último recurso, podría dividir la rotación y cortar en varios pasos, pero prefiero mantenerlos juntos. –

Segmentación ... no existe en jQuery. Cada función simplemente devuelve un objeto 'jQuery'. – Dykam

para Dykam: y esto es lo que llamamos revestimiento de tubería: D, puede canalizar más de una operación para Daniel: tiene razón, pero aún podemos encontrar una solución ...Me gustó este problema y publicaré otra respuesta si encuentro uno –

Puesto que los dos plugin-ins funcionan de maneras muy diferentes, yo no te puedo pensar Combina fácilmente los dos. jCrop simplemente le permite definir una marquesina rectangular sobre una imagen. Rotación, por otro lado, tampoco utiliza <canvas> para girar en realidad la imagen o el filtro DXImageTransform para mostrar que gira

Fuente

2009-09-17 14:37:07

en IE La rotación se realiza con atributo de ángulo, lo que significa que puede hacer rotación y luego jCrop –

Qué atributo de ángulo? El sitio oficial de jquery-rotate (http://code.google.com/p/jquery-rotate/) indica: Se admiten dos implementaciones de manejo de imágenes JavaScript: 1. usando el filtro DXImageTransform para Microsoft Internet Explorer 2. usando Objeto de lienzo para otros navegadores –

sí, y el filtro se aplica con css, por lo que es posible girar luego jCrop después de aplicar la rotación –

puede probar jQuery CropZoom (no la imagen de origen en realidad giratoria.): http://plugins.jquery.com/project/CropZoom

demostración y descargas aquí: http://www.gastonrobledo.com.ar/cropzoom/index.html

Fuente

2011-04-11 10:17:17 jihchuan

Sugiero que se gire el lado del servidor de imágenes. Realmente no se puede combinar jCrop con una imagen girada, ya que un método basado en CSS 'mentiría' sobre el ancho y alto.

Puede ser extremadamente rápido. Su interfaz de usuario simplemente agregaría 'rotar = 90' a la cadena de consulta de imágenes cuando se haga clic en el botón, y la imagen se volvería a cargar.

Aquí hay un muy simple example of using jCrop and querystring-based resizing.

Tome una look at the demo page para ver qué tan receptivo es - agregar el comando rotar solo tomaría algunas líneas de javascript. Si lo necesita, podría cargar una muestra de cómo combinarlos.

Fuente

2011-05-31 15:07:02

Sé que esta es una vieja pregunta, pero, ¿ha revisado este plugin jQuery llamado CropIt?

La demostración se ve muy bien y tiene zoom, recortar y girar en el mismo complemento, no se requiere código de fondo.

Espero que esto ayude.

Fuente

2016-12-20 22:08:09 germanio

Combinación de rotación y recorte de imagen en jQuery

Respuesta

Cuestiones relacionadas