Super lightweight (~8kb minified), self-contained (no libraries), HTML 5 & Javascript signature capture tool.
- Watermarking
- Saving images as PNG (with proper backend)
- Supports multiple signature captures on a single page
- Explanation text
- Saving png to server
- Supports
- Desktop
- Chrome
- Safari
- FireFox
- iOS
- Safari
- Chrome
- todo: more testing
- Desktop
- export as SVG
- export as JSON vectors
The following HTML and CSS snippets hold true for the following example usages
#my-signature-div { width: 400px; height: 200px; border: thin solid black; }<div id="my-signature-div"></div>Basic
var signature = new Signature({ displayId: 'my-signature-div' });
Watermark
var signature = new Signature({
displayId: 'my-signature-div',
watermark: {
url: 'img/github.png',
position: Signature.CENTER, // any cardinal/ordinal direction or CENTER (defaults to NORTH)
alpha: 0.2, // 0-1, representing transparency (default: 0.2)
width: 100, // width of displayed watermark
height: 100 // height of displayed watermark
}
});
Explanation Text
var signature = new Signature( {
displayId: 'my-signature-div',
explanation: {
text: "Signature signifies acceptace of aforementioned end user license agreement.", // set text for explanation
font: "georgia", // choose a font (defaults to sans-serif)
color: "#aaa", // defaults to #000
size: 12, // defaults to 10 point
lineHeight: 13, // defaults to 1.2em
maxWidth: 150, // defaults to entire width
position: Signature.NORTH_EAST // any cardinal/ordinal direction or CENTER (defaults to NORTH)
}
});
Saving
Either use the built in XMLHttpRequest/ActiveXObject("Microsoft.XMLHTTP") handling or provide your own
Built in handling
var signature4 = new Signature({
displayId: 'my-signature-div',
explanation: {
text: "This one saves.",
font: "georgia",
color: "#aaa",
size: 12,
lineHeight: 13,
maxWidth: 250,
position: Signature.NORTH_EAST
},
http: {
verb: "POST", // choose a verb. GET will only work for tiny requests. (defaults to POST)
address: "http://localhost:3000/images", // your backend address to handle image processing.
dataParam: 'data', // the parameter your backend image processor will take
onSave: function(response) { alert(response.status); } // handle the http response (eg. notify the user that the save was successful, if it was)
}
});Custom handling
var signature = new Signature( {
displayId: 'my-signature-div',
explanation: {
text: "This one saves the way I want it to.",
font: "georgia",
color: "#aaa",
size: 12,
lineHeight: 13,
maxWidth: 250,
position: Signature.NORTH_EAST
},
save: function(data) {
$.post('/images', {data: data}, function(response) { alert("Thank you for submitting your signature!"); });
}
});For both of these examples, I used a pretty basic rails action. Note that the png data is base 64 encoded, so you'll need to decode it before attempting to save it.
class ImagesController < ActionController::Base
def save
data = params[:data].gsub(/ /, '+') # pluses have been converted to spaces -> convert them back
File.open('image.png', 'wb') do|f|
f.write(Base64.decode64(data))
end
render :json => {:status => true}, :layout => false
end
endThis is an image dumped through a basic rails server (200x120). Note that it includes the output of the canvas (ie. explanation and watermark, if applicable).
Currently, the only styling available beyond explanation text (see Usage#explanation-text above) is the accept/reject buttons. They are standard button elements that are added to the container div. The class attached to them is settable
var signature5 = new Signature( {
displayId: 'display6',
watermark: {
url: 'img/github.png',
position: Signature.CENTER,
alpha: 0.2,
width: 100,
height: 100
},
explanation: {
text: "This one has custom accept/reject button classes AND a watermark.",
font: "georgia",
color: "#aaa",
size: 12,
lineHeight: 13,
maxWidth: 250,
position: Signature.NORTH_EAST
},
buttonClass: "my-button-class"
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent