2009-12-03 19 views
16

Io e il mio amico abbiamo in programma di costruire un negozio web. Una delle caratteristiche principali del negozio è la capacità del cliente di progettare le proprie cose. Il mio amico ha preso polyvore website come un esempio.libreria editor di immagini Javascript

Il punto di collegamento sopra riportato a una pagina di editor. In polyvore, il cliente può trascinare gli oggetti dal lato destro a una "tela" sul lato sinistro della pagina. l'immagine ha un semplice gestore per ridimensionare, ruotare e spostare.

Questa è la caratteristica principale che vogliamo raggiungere. Voglio sapere se c'è qualche libreria JavaScript gratuita là fuori che fornisce queste funzionalità? Non abbiamo bisogno di cose troppo avanzate, perché l'obiettivo non è fare qualcosa come l'applicazione Photoshop online. L'editor di polyvore ha la maggior parte delle funzionalità di cui abbiamo bisogno.

+0

Per vostra informazione, preferisco usare jQuery e jQuery-UI. Ma non chiude una possibilità per un altro framework, se la libreria è solo per quel framework. Sto ancora aspettando altre risposte, mentre continuavo a cercare. Potrei anche prendere in considerazione l'idea di crearne uno, magari usando la tela, quindi se hai un buon link tutorial, sei libero di condividerlo qui, voterò il buon tutorial. Grazie –

+0

Hai avuto successo? Sarei interessato a sapere cosa hai trovato o eventualmente utilizzato. Sto sviluppando un'applicazione simile e anche se mi sto appoggiando a jQuery, mi dispiacerebbe rivedere qualcosa che è già stato fatto .... Grazie! – TomO

+0

Ciao Tom. Il progetto stesso è stato messo in attesa, quindi non ho più cercato la libreria. Sentiti libero di provare le librerie suggerite nelle risposte qui sotto. –

risposta

6

Pixastic ha un semplice editor di immagini Javascript che utilizza Canvas.

+3

Un editor di immagini javascript molto basso e semplice: http://code.google.com/p/svg-edit/ (prova la demo) – Kartoch

+1

http: //editor.pixastic.com utilizza canvas, non supportato da IE –

+1

, il progetto viene annullato, ma pixastic sembra promettente. Forse proverò più tardi per gli altri progetti –

1

Se si sviluppa l'app utilizzando un framework basato su JavaScript completo, come Cappuccino o SproutCore, questo tipo di manipolazione delle immagini leggera dovrebbe essere banale da implementare.

Se si desidera una maggiore flessibilità con l'implementazione del sito, utilizzare una libreria più piccola come jQuery UI o Interface Elements (che è un elenco molto incompleto - ci sono tonnellate di librerie simili in giro).

0

Questa non sarà una risposta completa, ma dovrebbe guidarvi. Ext-js ha un oggetto chiamato Ext.Resizable, http://www.extjs.com/deploy/dev/docs/?class=Ext.Resizable, puoi applicarlo a qualsiasi nodo e aggiungerà maniglie per ridimensionarlo. Questo non è presente nella loro distro principale (jsquery), è necessaria la distribuzione completa.

La rotazione delle immagini è molto più complicata in quanto non è supportata in tutti i browser (il webkit consente la rotazione tramite css). Quello che suggerisco è che si utilizza una libreria di tela cross browser, come http://me.eae.net/projects/iecanvas/demo.html, che consente di ruotare le immagini che vengono disegnate sulla tela. Tuttavia, non puoi davvero combinare i due che ho menzionato, ti suggerisco di guardarli entrambi per trarne ispirazione e distribuirli da soli (a meno che qualcun altro non trovi uno strumento che lo faccia già)