jsSignature

jsSignature is a dependency-free TypeScript successor to jSignature. It captures signatures with Pointer Events and Canvas while preserving the original native, base30, SVG, SVG-base64, and bitmap data formats.

The jSignature/ directory is the untouched upstream implementation used as a behavioral reference. The replacement is implemented in src/.

Install and use

npm install @matthewkilpatrick/js-signature

import { JSSignature } from "@matthewkilpatrick/js-signature";

const signature = new JSSignature("#signature", {
  width: "100%",
  height: "ratio",
  color: "#000",
  undoButton: true
});

const [mime, base30] = signature.getData("base30") as [string, string];
signature.setData(`data:${mime},${base30}`);

No global variables or jQuery plugin are installed. The constructor accepts a CSS selector or an HTMLElement.

Migrating from the jQuery API

| jQuery API | Dependency-free API | | --- | --- | | $("#signature").jSignature(options) | new JSSignature("#signature", options) | | $pad.jSignature("getData", format) | pad.getData(format) | | $pad.jSignature("setData", data, format) | pad.setData(data, format) | | $pad.jSignature("reset") | pad.reset() | | $pad.jSignature("clear") | pad.clear() | | $pad.jSignature("disable") | pad.disable() | | $pad.jSignature("enable") | pad.enable() | | $pad.jSignature("destroy") | pad.destroy() | | $pad.jSignature("isModified") | pad.isModified() | | $pad.jSignature("getSettings") | pad.getSettings() | | $pad.jSignature("updateSetting", key, value, apply) | pad.updateSetting(key, value, apply) | | $pad.bind("change", listener) | pad.element.addEventListener("change", listener) |

The old UndoButton option remains accepted; new code should use undoButton. The instance also exposes undo() directly.

Data compatibility

Supported exports:

• default: Canvas data URL
• native: the original { x: number[], y: number[] }[] stroke structure
• base30 and image/jsignature;base30
• svg and image/svg+xml
• svgbase64 and image/svg+xml;base64
• image: [mime, payload]

Supported imports:

• native
• base30 and image/jsignature;base30
• image data URLs (image/png;base64, image/jpeg;base64, and image/jpg;base64)

Custom formats can be registered with JSSignature.addPlugin() and inspected with JSSignature.listPlugins().

Development

npm install
npm test
npm run build

The tests retain the upstream suite's native/base30 roundtrip and internal base30 vectors, including its full reference signature payload.

Examples

Build the package, serve the project root, and open /examples/:

npm run build
python3 -m http.server 8000

The examples mirror the upstream index.html, unmini.html, and noconflict.html pages using the dependency-free class API.