Registrazione e memorizzazione di disegni a mano ad alta risoluzione

Question

Esistono soluzioni avanzate per catturare un disegno a mano (da un tablet, touch screen o dispositivo simile ad iPad) su un sito Web in JavaScript e archiviarlo sul lato server?

Essenzialmente, questa sarebbe una tela semplice disegno mouse con la specialità che la sua risoluzione (cioè il numero di movimenti del mouse cattura per secondo) deve essere molto elevato, altrimenti linee rotonde nel disegno diventeranno "poligonale "quando si sposta la penna/mouse veloce:

(se così non fosse il caso, la soluzione suggerita da inputDraw @Gregory sarebbe perfetto al 100%.)

sarebbe inoltre necessario avere un alto livello di graphi qualità cal., ovvero antialias the penstroke. Non c'è niente di speciale qui, ma uno stile MS Paint, il colpo di pixel 1x1 non lo taglierà.

Trovo che questa sia una cosa molto interessante in generale, visto che i Tablet PC stanno diventando almeno un po 'più comuni. (Non che ottengano l'attenzione che ritengono di meritare).

Qualsiasi suggerimento è molto apprezzato. Preferirei una soluzione Open Source, ma sono anche aperto a soluzioni proprietarie come controlli ActiveX o applet Java.

FF4, il supporto Chrome è un must; Opera, è richiesto il supporto per IE8/9.

Si prega di notare che la maggior parte delle biblioteche "tela" in giro, e la maggior parte risposte ad altre domande simili alle mie, si riferiscono a programmazione disegnare su una tela. Questo è non quello che sto cercando. Sto cercando qualcosa che registra i movimenti reali della penna o del mouse dell'utente che disegna su una determinata area.

Avvio di una taglia per curiosità se qualcosa è cambiato nel corso del tempo da quando questa domanda è stato chiesto.

Answer 1

ci sono alcune applet per questo nel mondo Oekaki: Shi painter, Chibipaint o PaintBBS. Here hai classi php per l'integrazione.

I disegni prodotti da queste applet possono avere una qualità piuttosto buona. Se ti registri in oekakicentral.com puoi vedere tutte le gallerie e alcuni disegni hanno un link di animazione che mostra come è stato disegnato (dipende dall'applet), quindi puoi confrontare le possibilità delle applet. Alcuni di loro sono open source.

Edit: Vedi anche this realizzato in HTML 5.

Answer 2

Dai un'occhiata alla <InputDraw/>: un componente Flash che trasforma disegno a mano libera in SVG. Quindi è possibile inviare di nuovo l'SVG generato al proprio server.

È gratuito per uso non commerciale. Secondo il loro sito, il prezzo di uso commerciale è 29€. Non è open source però.

IMHO vale la pena dare un'occhiata.

In alternativa, si implementa qualcosa basato su svg-edit che è open source e utilizza jQuery (demo). Se richiede il Google Frame Plugin per supporto IE6 + però.

EDIT: Ho appena trovato il progetto svg-freehand-signature (demo) che cattura la vostra firma scritta a mano e lo invia a un server come SVG usando POST. È distribuito come straight-forward and self-contained zip (funziona con Safari e Firefox, è possibile combinarlo con svgweb con brings SVG support to Internet Explorer).

MODIFICA: ho combinato con successo Cesar Oliveira's canvaslol (basta guardare la fonte della pagina per vedere come funziona) con ExplorerCanvas per avere qualcosa su IE. Puoi anche dare un'occhiata all'esperimento Anne van Kesteren's Paintr.

Answer 3

Dubito che otterrai una risoluzione superiore a quella dell'evento "onmousemove", senza scrivere un programma di assemblaggio efficiente su un sistema incorporato progettato appositamente per lo scopo. Corri all'interno di un sistema operativo, giochi secondo le regole del sistema operativo, il che significa che sei limitato dalla frequenza delle fasce temporali che un sistema operativo ti fornirà. (di solito circa 100 al secondo, flussante a seconda del carico) Non ho usato un tablet in grado di superare il problema del "poligono" e ho usato alcuni tablet di fascia alta. Photoshop supera il problema con l'interpolazione cubica.

Cioè, a meno che, si dispone di una tavoletta molto speciale che cattura molti eventi di movimento e li fila per un po 'di buffer interno, e inviare un intero pacchetto di coordinate in un momento in cui invia i dati al sistema operativo. Tuttavia, ho guardato al tablet api e danno solo un set di coordinate alla volta, quindi se ciò accadrà, avrai bisogno di hardware personalizzato e un driver personalizzato e apis personalizzati in grado di gestire pacchetti di più coordinate.

Oppure si potrebbe usare un dannato canvas tag, l'evento onmousemove, event.pageX|pageY qualche cubic interpolation, il "toDataURI" api di tela, inviare il risultato al vostro script php, e poi basta dire che hai fatto tutto ciò che altre cose di fantasia.

onmousemove, nei miei test, ti darà un evento per pixel di movimento, limitato solo dalla velocità del ciclo degli eventi nel browser. Otterrete punti dati sparsi (poligoni) con movimento rapido e questo è il massimo che si ottiene senza un enorme contributo di ricerca e un progettista hardware. Affare.

Answer 4

markup.io lo fa con un algoritmo applicato dopo il mouse.

ho fatto una domanda simile di recente, e ci hanno dato interessante, ma non risposte soddisfacenti: API sensibili Is there any way to accelerate the mousemove event?