Combinazione di immagini e ritaglio in jQuery

Attualmente disponiamo di un sistema per il ritaglio di immagini che utilizza jCrop sul front-end e System.Drawing in .NET sul backend - funziona molto bene, ma ora è necessario introdurre la rotazione dell'immagine. Sono necessari solo angoli di 90 gradi e jQuery.Rotate funziona bene isolatamente, ma mi piacerebbe combinare questi due plugin jQuery con garbo. Hai qualche esperienza in questo settore? Ci sono soluzioni "shake & bake"?Combinazione di immagini e ritaglio in jQuery

fonte

2009-09-17 Daniel Schierbeck

Puoi fornire maggiori dettagli su ciò che stai cercando di ottenere? Vuoi che l'utente definisca un rettangolo di ritaglio e definisca un angolo di rotazione allo stesso tempo? Qual è il risultato visivo esatto che stai cercando di ottenere? –

Ciao Ates, Sto cercando di avere una singola vista dell'immagine, con una barra degli strumenti che consente di ruotare e ritagliare l'immagine in un unico passaggio combinato. –

Penso jQuery pipe-rivestimento è la risposta per alcun plugin jQuery

ad esempio:

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

fonte

2009-09-17 11:15:56

Ho paura che questo non funzioni. Sia jCrop che jQuery-Rotate apportano modifiche sostanziali al DOM; hanno bisogno di integrarsi in qualche modo. Come ultima risorsa, potrei dividere la rotazione e il ritaglio in più passaggi, ma preferirei tenerli insieme. –

Pipelining .. non esiste in jQuery. Ogni funzione restituisce semplicemente un oggetto 'jQuery'. – Dykam

per Dykam: e questo è quello che chiamiamo pipe-lining: D, puoi pipeline più di una operazione per Daniel: hai ragione, ma possiamo ancora trovare una soluzione ...mi è piaciuto di questo problema e pubblicherà un'altra risposta se trovo uno –

Dal momento che i due plug-in funzionano in modi molto diversi, io non pensi di poter combina prontamente i due. jCrop consente semplicemente di definire un perimetro rettangolare su un'immagine. Rotazione, d'altra parte, sia usa <canvas> per ruotare in realtà l'immagine o il filtro DXImageTransform di mostrarlo ruotato

fonte

2009-09-17 14:37:07

su IE di rotazione è fatto con l'attributo angolo, il che significa che si può fare la rotazione e quindi jCrop –

Cosa attributo angolo? Il sito ufficiale di jquery-rotazione (http://code.google.com/p/jquery-rotate/) afferma: Sono supportati due JavaScript implementazioni di gestione delle immagini: 1. utilizzando il filtro DXImageTransform per Microsoft Internet Explorer 2. utilizzando oggetto Canvas per gli altri browser –

sì, e il filtro viene applicato con i CSS, in modo che sia realizzabile per ruotare poi jCrop dopo aver applicato la rotazione –

si può provare jquery CropZoom (in realtà non ruotare l'immagine di origine.): http://plugins.jquery.com/project/CropZoom

Demo e download qui: http://www.gastonrobledo.com.ar/cropzoom/index.html

fonte

2011-04-11 10:17:17 jihchuan

Suggerisco di ruotare il lato del server di immagini. Non puoi davvero combinare jCrop con un'immagine ruotata, dato che un metodo basato su CSS "mentire" sulla larghezza e l'altezza.

Può essere estremamente veloce. L'interfaccia utente aggiungerebbe semplicemente "ruotare = 90" all'immagine querystring quando si fa clic sul pulsante e l'immagine si ricaricherà.

Ecco un numero molto simple example of using jCrop and querystring-based resizing.

Prendere un look at the demo page per vedere quanto è reattivo - l'aggiunta del comando di rotazione richiede solo poche righe di javascript. Se ne hai bisogno, potrei caricare un esempio di come combinarli.

fonte

2011-05-31 15:07:02

So che questa è una domanda vecchia ma, hai controllato questo plugin jQuery chiamato CropIt?

La demo sembra molto buona e si dispone di zoom, ritaglio e rotazione nello stesso plugin, nessun codice di back-end richiesto.

Spero che questo aiuti.

fonte

2016-12-20 22:08:09 germanio

Combinazione di immagini e ritaglio in jQuery

risposta

Problemi correlati