Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A simple Aurelia Custom Element around SignaturePad
<template>
<require from="../resources/elements/input-signature"></require>
<div style="display:flex;flex-direction:column;flex-grow:1">
<h1>Release Header</h1>
<p>Some descriptive text</p>
<input-signature view-model.ref="sigInput"></input-signature>
<button click.delegate="saveData()"></button>
</div>
</template>
export class Example {
public sigInput : any;
saveData() {
if(this.sigInput.sp.isEmpty())
return;
this.client.signature = this.sigInput.sp.toDataURL("image/png");
//update data to server, etc.
}
}
.signature-wrapper {
border: 1px solid black;
position: relative;
height: 10em;
display: flex;
}
.signature-box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<template>
<require from="./input-signature.css"></require>
<div style="margin: 10px;">
<div class="signature-wrapper">
<canvas class="signature-box" ref="sCanvas"></canvas>
</div>
<div style="display:flex;justify-content:flex-end;">
<button class="btn" style="padding:10px;" click.delegate="sp.clear()">Clear</button>
</div>
</div>
</template>
import SignaturePad from 'signature_pad';
export class InputSignatureCustomElement {
public sp: SignaturePad;
private sCanvas : HTMLCanvasElement;
attached(){
this.sp = new SignaturePad(this.sCanvas);
this.resize();
}
resize() {
let ratio = Math.max(window.devicePixelRatio || 1, 1);
this.sCanvas.width = this.sCanvas.offsetWidth * ratio;
this.sCanvas.height = this.sCanvas.offsetHeight * ratio;
this.sCanvas.getContext("2d").scale(ratio, ratio);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.