Come ruotare l'immagine con jQuery come 'Trasformazione libera' in Photoshop?

Question

Ho cercato ovunque ma non riesco a trovare come ruotare (gradi) con il bordo dell'immagine o qualcosa come "ridimensionabile" in jQuery. Quello che intendo è qualcosa di simile al bordo 'Trasformazione libera' in Photoshop che ha 4 posizioni da ruotare in ogni angolo dell'immagine.

Answer 1

È possibile ruotare le immagini con i filtri DirectX di IE, ma non credo che risolverà il problema. Potrebbe essere necessario utilizzare qualcosa come Flash o Silverlight per fare quel lavoro.

Non sono a conoscenza di alcun JavaScript che abbia quel tipo di alimentazione. Ecco esperimento un ragazzo, ma il risultato non è molto buona:

http://www.walterzorn.com/rotate_img/rotate_img.htm

Questo è davvero bello, e utilizza Flash:

http://www.swfir.com/examples/multiple/

Answer 2

This potrebbe aiutare. Non sono esperto, ma sembra che tu possa avere incrementi di 90 gradi solo in IE.

Answer 3

L'unico modo in cui posso pensare di farlo in javascript sarebbe utilizzare l'elemento canvas.

Provare a utilizzare il seguente plugin: http://wilq32.googlepages.com/wilq32.rollimage222

Answer 4

Se stai usando Javascript, perché non lasciare che il server di fare il lavoro e ottenere il risultato tramite una chiamata AJAX? Controlla le librerie di ImageMagick (http://www.imagemagick.org/script/index.php). Se l'utente finale è quello che specifica i parametri di rotazione, acquisire tali input in javascript, inviarlo al server per l'elaborazione da ImageMagick (o un'altra libreria) e aggiornare il lato client dell'immagine.

Answer 5

Here's a starting point che funziona in WebKit. (Ho usato Safari 4.) Non ho dovuto fare alcuna vera matematica da secoli, quindi dovrai calcolare l'angolo di rotazione corretto in base alla distanza del trascinamento. Inoltre, la casella di rotazione viene leggermente sfalsata quando inizi a ruotare. Possono ruotare attorno a un diverso punto centrale.

Answer 6

CSS3 supporta rotation tuttavia in questo momento solo chrome e safari supportano la rotazione CSS3 con il webkit. Ecco un bel example di rotazione in CSS3. Se vuoi vedere se funziona nel tuo browser prova questo link. Dovrebbe essere un orologio funzionante.

Per ora troynts answer sembra la soluzione migliore.

In futuro o con safari o cromo è possibile farlo.

$(this).css('-webkit-transform','rotate(45deg)'); 

Answer 7

Sto usando raphaeljs (raphaeljs.com). Ti permetterà di disegnare su una tela. Quindi puoi prima aggiungere un rettangolo di sfondo, quindi aggiungere l'immagine e infine ruotare. Così mostrando un confine. Per quanto ho potuto trovare, questo non è possibile con la rotazione di wilq32.