The E-Signature lightning component enables the salesforce developers to add e-sinature feature on their web/salesforce1 mobile application. It generates the image data URL string so that you can either save it into the database as one of the table field or save it as PNG file. It also to show the signaure in Read only mode.
<c:ESignature aura:id="signature" minWidth="0.5" maxWidth="1.5" penColor="rgb(0,0,255)"/>minWidth (double): minimum width of a line
maxWidth (double): maximum width of a line
penColor (string): pen color, can be 'red', 'blue' or rgb(0,0,0) etc;
Step2: in your container component, you have save button to save the signature into the backend storage. here is the sample code when the save button is clicked.
onSave: function(component, event){
var pngDataStringUrl, signature = component.find('signature');
signature.capture();
pngDataStringUrl = signagure.get('v.signatureData');
//call backend API to save the pngDataStringURL
}sometime you want to show saved signature on the page. The ESignature has ReadOnly mode so that it show the saved signature.
<c:ESignature aura:id="signature" readOnly="true"/>Step2: assumed that on init event, you call Web API to get the saved signature png datastring url, you can set attribute as show below:
onInit: function(component, event){
var signature = component.find('signature');
var dataStringUrl = '....you get from web api call';
signature.set('v.signatureData', dataStringUrl);
}We augment this signature pad library to add compressing capability to shake down the size of the generated signature so that you don't need another library to shrink the size.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent