ciao,
puoi fare tutto lato client, con codice javascript.
Grazie alle API della canvas di HTML5, infatti, potrai disegnare il percorso tracciato dal pennino.

Comunque non c'è bisogno di scrivere troppo codice: ecco due implementazioni già pronte da usare, ci sono anche le istruzioni per inserirle nella pagina web. Scegli quella che preferisci.
http://thomasjbradley.ca/lab/signature-pad/
http://www.zetakey.com/codesample-signature.php

La canvas ha la possibilità di catturare il disegno come dati binari di un'immagine. Potrai inviare questi dati lato server per salvarli su file o database. Se ne è parlato giusto un paio di settimane fa:
http://forum.aspitalia.com/forum/post/400017/Salvare-Canvas-Server.aspx
Ma magari quelle due implementazioni hanno già un loro modo di inviare l'immagine al server. Leggi bene la loro documentazione.

per poi integrarlo su un pdf.

Una volta che hai ottenuto l'immagine della firma, puoi inserirla in un PDF grazie ad iTextSharp. Ecco un esempio.
http://www.mikesdotnetting.com/Article/87/iTextSharp-Working-with-images

ciao,
Moreno

---

Modificato da BrightSoul il 06 novembre 2013 23.20 -

ciao,

lukeamadio ha scritto:

con l'esempio in js che mi hai segnalato come faccio a salvare l'immagine in png in automatico dopo aver cliccato il tasto salva

La canvas dispone del metodo .toDataUrl() che ti consente di ottenere il disegno come immagine PNG, codificata in base64.

Tuttavia, se scegli di usare il SignaturePad che ti avevo segnalato, hai questo metodo getSignatureImage() che fà la stessa cosa ma aggiunge anche il supporto a vecchie versioni di IE, rimpiazzando la canvas con una sua versione flash.

SignaturePad dispone anche di un altro sistema per salvare la firma come immagine. Anziché inviare i dati binari al server, puoi inviargli un array JSON, che contiene le coordinate dei punti che compongono il tracciato della firma.
Lato server, potrai ricostruire l'immagine grazie a questa libreria C#
https://github.com/parrots/SignatureToImageDotNet


ciao,
Moreno

---

Modificato da BrightSoul il 10 novembre 2013 13.12 -

ciao Luke,

Sono un neofita di js e ancora meno php...

Cerca di leggere molto, è una cosa che non ti abbandonerà mai neanche quando sarai diventato esperto. E' l'unico modo per cavarsela anche con tecnologie che si usano per la prima volta.

Nel caso specifico, SignaturePad possiede una documentazione molto dettagliata che ti guida passo passo al suo uso. All'inizio potrebbe volerci un po' ma imparerai a comprendere questo tipo di documentazioni e ti sarà utile la prossima volta, quando userai altri componenti javascript.

Riesci a scrivermi il codice?

Qui trovi un progetto di esempio:
https://skydrive.live.com/redir?resid=2B0F0F6D27852B8E!408&authkey=!ABegzi9rMvBkry0
Se non comprendi qualcosa fai pure delle domande. Copiare senza capire non serve a nulla.

var canvas = document.getElementById("newSignature");
var dataURL = canvas.toDataURL("image/png");
document.getElementById("saveSignature").src = dataURL;

Alla fine non ho usato questo sistema, perché ho letto che SignaturePad già prevede il salvataggio dei dati su server. Ecco i paragrafi rilevanti nella sua documentazione.
http://thomasjbradley.ca/lab/signature-pad/#database
http://thomasjbradley.ca/lab/signature-pad/#images-serverside

ciao,
Moreno

---

Modificato da BrightSoul il 12 novembre 2013 22.12 -