Everyone uses this jquery plugin in daily development to make online signatures.What the user draws is saved as a picture,Very convenient and practical.The following will share the support methods,For your referenceLet ’s take a look at the detailed introduction together.

Methods as below:

Use this signature plugin to introduce jquery and jq-signature.js files.

<script src="jquery/1.11.0/jquery.min.js"></script>
<script src="jq-signature.js"></script>

html structure

<!-Create a signature area,Use html5's data-option to pass some parameters->
 data-border="1px solid #1abc9c"
<!-Create two action buttons,For emptying artboards and saving signatures separately->
<button onclick="clearcanvas ();">clear canvas</button>
<button onclick="savesignature ();" disabled>save signature</button>
<!-An empty<div>can be used to display the saved signature picture->

Initialize the plugin

//After the page is loaded, use the following method to initialize the signature plugin
$(document) .on ("ready", function () {
 $(". js-signature"). jqsignature ();
function clearcanvas () {
 $("#signature"). html ("<p><em>your signature will appear here when you click" save signature "</em></p>");
 $(". js-signature"). jqsignature ("clearcanvas");
 $("#savebtn"). attr ("disabled", true);
function savesignature () {
 $("#signature"). empty ();
 var dataurl=$(". js-signature"). jqsignature ("getdataurl");
 var img=$("<img>"). attr ("src", dataurl);
 $("#signature"). append ($("<p>"). text ("here" s your signature:"));
 $("#signature"). append (img);
$(". js-signature"). on ("jq.signature.changed", function () {
 $("#savebtn"). attr ("disabled", false);

Configuration parameter

Here are some of the parameters available for this signature plugin,These parameters can be used on data-attributes at the same time:

parameter description data attribute Example
width The width of the signature canvas, in pixels.Default value 300 data-width="600" $(). jqsignature ({width:600});
height The height of the signature canvas, in pixels,Default value 100 data-height="200" $(). jqsignature ((height:200));
border The border css style of the signature canvas. Default is "1px solid #aaaaaa" data-border="1px solid red" $(). jqsignature ({border:"1px solid red"});
background The background color of the signature canvas,The default value is "#ffffff" data-background="#eeeeee" $(). jqsignature ({background:"#eeeeee"});
line color Signature color.The default value is #222222 " data-line-color="#abcdef" $(). jqsignature ({linecolor:"#abcdef"});
line width Signature line width,Unit pixel,The default value is 1 data-line-width="2" $(). jqsignature ((linewidth:2});
auto fit Make the canvas fill the width of the parent element,Default value is false data-auto-fit="true" $(). jqsignature ((autofit:true));

to sum up

  • Previous Canvas simply and quickly realizes the background effect of the login page
  • Next AngularJs filter filter and custom filter example