Generador de signatura

Crea la teva pròpia signatura personalitzada i descarrega-la fàcilment.

4,94 de 18 valoracions

16:9 4:3 3:4 1:1

1. Introducció

Generador de signatures és una eina basada en el navegador que et permet crear una signatura digital manuscrita utilitzant el ratolí, el panell tàctil o la pantalla tàctil. Pots dibuixar la teva signatura directament sobre un llenç, personalitzar-ne el color i el gruix, ajustar el fons (incloent-hi la transparència) i exportar-la en diversos formats d'imatge com SVG, PNG, JPG i WEBP.

Aquesta eina és ideal per signar documents digitals, afegir signatures a fitxers PDF, inserir una signatura al peu dels correus electrònics o preparar imatges de signatures transparents per a projectes de disseny. Com que tot s'executa al teu navegador, no cal carregar fitxers ni fer cap processament al servidor. La teva signatura es genera de manera instantània i es pot descarregar immediatament en el format que necessitis.

Tant si necessites un PNG transparent per a contractes, un SVG escalable per imprimir o un JPG per compartir ràpidament, aquest generador de signatures ofereix una solució ràpida i flexible tant per a ús personal com professional.

2. Com funciona

L'eina utilitza un llenç HTML5 interactiu on els usuaris poden dibuixar traços a mà alçada. Cada traç es captura com una seqüència de punts, incloent-hi la posició, el temps i les dades de pressió (quan estan disponibles). Aquests punts es processen per convertir-los en corbes suaus, garantint una escriptura d'aspecte natural en lloc de línies irregulars o dentades.

Paràmetres d'entrada

Àrea del llenç: La superfície de dibuix on crees la teva signatura.
Color del llapis: Selecciona un color d'escriptura personalitzat en format hexadecimal (convertit internament a RGB).
Color de fons: Tria un color sòlid o un fons transparent utilitzant valors RGBA.
Gruix del llapis: Tres nivells de gruix seleccionables que ajusten l'amplada mínima i màxima del traç.
Relació d'aspecte: Tria entre 16:9, 4:3, 3:4 o 1:1 per controlar les dimensions del llenç.

Lògica de renderització dels traços

Mentre dibuixes, el sistema captura els esdeveniments del punter o del tacte i els converteix en segments de corba. Calcula la velocitat del traç per ajustar dinàmicament el gruix de la línia, produint un efecte de ploma natural. Cada traç s'emmagatzema com a dades estructurades, cosa que permet funcions com desfer i tornar a dibuixar el fons sense perdre la signatura.

Regles de validació

Els valors del gruix del llapis inferiors a 1 es defineixen automàticament amb el gruix mínim compatible.
Les entrades de color han de seguir un format hexadecimal vàlid.
El canvi de mida del llenç queda restringit un cop s'ha començat a dibuixar per evitar deformacions.
La funció Desfer només elimina el traç més recent si existeixen dades del traç.

Formats de sortida

Pots exportar la teva signatura en:

SVG – Format vectorial escalable, ideal per a impressions d'alta resolució.
PNG – Compatible amb transparència.
JPG – Format comprimit per a ús general.
WEBP – Format d'imatge modern i optimitzat.

Limitacions

L'eina no verifica la identitat ni proporciona autenticació amb validesa legal.
Les signatures es dibuixen manualment i no es generen automàticament a partir de text.
Canviar la mida després de dibuixar pot requerir esborrar el llenç.

3. Com utilitzar aquesta eina

Tria la relació d'aspecte que prefereixis per al llenç.
Selecciona un nivell de gruix del llapis.
Defineix el color de la signatura que vulguis.
Opcionalment, tria un color de fons (o deixa'l transparent).
Dibuixa la teva signatura utilitzant el ratolí o la pantalla tàctil.
Utilitza Desfer per eliminar l'últim traç si cal.
Fes clic a Esborra per reiniciar completament el llenç.
Descarrega la teva signatura en format SVG, PNG, JPG o WEBP.

4. Exemples pràctics

Exemple 1: PNG transparent per a contractes PDF

Entrada:

Relació d'aspecte: 4:3
Color del llapis: Negre (#000000)
Fons: Transparent
Gruix del llapis: Mitjà

Sortida: download.png (fons transparent)

Utilitza aquest fitxer per inserir la teva signatura en un contracte PDF sense un quadre blanc al darrere.

Exemple 2: SVG d'alta resolució per imprimir

Entrada:

Relació d'aspecte: 16:9
Color del llapis: Blau (#1a73e8)
Fons: Blanc
Gruix del llapis: Gruixut

Sortida: download.svg

Com que l'SVG està basat en vectors, la signatura es manté nítida quan es redimensiona per a capçaleres de carta o materials impresos.

5. Casos d'ús per a desenvolupadors

- Sistemes d'automatització de documents

Integra les imatges de signatures descarregades en fluxos de treball automatitzats de generació de documents (per exemple, contractes, factures i acords).

- Captura de signatures al costat del client

Utilitza les dades d'imatge Base64 exportades per a càrregues mitjançant AJAX:

const dataUrl = signaturePad.toDataURL('image/png');
// Envia dataUrl a l'API del backend per emmagatzemar-lo

- Inserció d'SVG en aplicacions web

Com que la sortida SVG està basada en vectors, es pot inserir directament en HTML:

<img src="signature.svg" alt="Signatura digital">

- Gestió segura de les dades

Com que la generació de la signatura es fa completament al navegador, no cal processament al servidor tret que s'implementi explícitament. Això redueix el risc d'exposició de dades. Els desenvolupadors poden validar les cadenes Base64 al servidor abans de desar-les per evitar entrades malformades.

- Processament en segon pla amb PHP

$base64 = $_POST['signature'];
$image = str_replace('data:image/png;base64,', '', $base64);
$image = base64_decode($image);
file_put_contents('signature.png', $image);