jSignature 예제

출처 : http://makitweb.com/capture-signature-in-the-webpage-with-jquery-plugins/#jSignature

Last updated on January 12th, 2017 by Yogesh Singh

Capture Signature in the webpage with jQuery plugins

In this tutorial, I show you some jQuery plugins by using it you can capture the user signature on your web page.

They add a container on the web page where the user can draw its signature using mouse pointer.

I discuss the following plugins –

• jSignature
• Signature Pad
• jQuery UI Signature

Download

---

Contents

1. jSignature
2. Signature Pad
3. jQuery UI Signature
4. Conclusion

---

 

1. jSignature

Here, are some steps for including this plugin –

Steps

• Download the jSignature plugin and include the following scripts –

<script src='jquery.js' type='text/javascript'></script>
<script src="libs/jSignature.min.js"></script>
<script src="libs/modernizr.js"></script>

<!--[if lt IE 9]>
<script type="text/javascript" src="libs/flashcanvas.js"></script>
<![endif]-->

You need to include flashcanvas.js script for IE older versions.

• Create a container element.

<div id="signature"></div>

• Initializing jSignature on the container.

$("#signature").jSignature({'UndoButton':true});

Example

In the example, I am showing the image preview of the signature when the button gets clicked.

<!-- jQuery -->
<script src='jquery-3.0.0.js' type='text/javascript'></script>

<!-- jSignature -->
<script src="libs/jSignature.min.js"></script>
<script src="libs/modernizr.js"></script>

<!--[if lt IE 9]>
<script type="text/javascript" src="libs/flashcanvas.js"></script>
<![endif]-->

<!-- jSignature -->
<style>
#signature{
width: 100%;
height: auto;
border: 1px solid black;
}
</style>

<!-- Signature area -->
<div id="signature"></div><br/>
 
<input type='button' id='click' value='click'>
<textarea id='output'></textarea><br/>

<!-- Preview image -->
<img src='' id='sign_prev' style='display: none;' />

<!-- Script -->
<script>
$(document).ready(function() {

 // Initialize jSignature
 var $sigdiv = $("#signature").jSignature({'UndoButton':true});

 $('#click').click(function(){
  // Get response of type image
  var data = $sigdiv.jSignature('getData', 'image');

  // Storing in textarea
  $('#output').val(data);

  // Alter image source 
  $('#sign_prev').attr('src',"data:"+data);
  $('#sign_prev').show();
 });
});
</script>

Output

Draw your signature in the first container and click the button

---

 

2. Signature Pad

It uses HTML5 canvas where the user can draw its signature. It works on all modern browser and doesn’t depend on any external libraries.

Steps

• Download the plugin from here and include the following script –

<script src="js/signature_pad.js"></script>

• Create a canvas element.

<canvas id="signature-pad" class="signature-pad" width="300px" height="200px"></canvas>

• Initialize SignaturePad on the canvas.

var signaturePad = new SignaturePad(document.getElementById('signature-pad'));

Example

Showing the signature preview when the preview button gets clicked.

<style>
#signature{
 width: 300px; height: 200px;
 border: 1px solid black;
}
</style>

<!-- Signature -->
<div id="signature" style=''>
 <canvas id="signature-pad" class="signature-pad" width="300px" height="200px"></canvas>
</div><br/>
 
<input type='button' id='click' value='preview'><br/>
<textarea id='output'></textarea><br/>

<!-- Preview image -->
<img src='' id='sign_prev' style='display: none;' />

<!-- Script -->
<script src='jquery-3.0.0.js' type='text/javascript'></script>
<script src="signature_pad-master/example/js/signature_pad.js"></script>
 
<script>
$(document).ready(function() {
 var signaturePad = new SignaturePad(document.getElementById('signature-pad'));

 $('#click').click(function(){
  var data = signaturePad.toDataURL('image/png');
  $('#output').val(data);

  $("#sign_prev").show();
  $("#sign_prev").attr("src",data);
  // Open image in the browser
  //window.open(data);
 });
})
 </script>

Output

Draw your signature and click the preview button.

---

 

3. jQuery UI Signature

This plugin uses jQuery UI library and mouse module to draw a signature. You can get this library from here.

Steps

• First, include jQuery UI library in your page with jQuery.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

• Include jquery.signature.css and jquery.signature.js.

<link type="text/css" href="css/jquery.signature.css" rel="stylesheet"> 
<script type="text/javascript" src="js/jquery.signature.js"></script>

• For enabling on touch enabled device you need to include jquery.ui.touch-punch.js which you get it from here.

<script src="jquery.ui.touch-punch.js"></script>

• You need to include excanvas.js for IE older versions.

<!--[if IE]>
<script src="excanvas.js"></script>
<![endif]-->

• Create a container element.

<div id="signature"></div>

• Initialize signature on the container

// Initialize
 $('#signature').signature();

Example

Displaying the signature preview when the preview button gets clicked.

<link href="jquery-ui.css" rel="stylesheet">
<link href="jquery.signature/jquery.signature.css" rel="stylesheet">
<style>
 #signature,#prev{
 width: 300px;
 height: 200px;
 }
</style>
<!--[if IE]>
<script src="excanvas.js"></script>
<![endif]-->
<script src="jquery-3.0.0.js"></script>
<script src="jquery-ui.js"></script>
<script src="jquery.signature/jquery.signature.js"></script>
<script src='jquery.ui.touch-punch.js'></script>
<script>
$(function() {
 
 // Initialize
 $('#signature').signature();

 // Clear signature area
 $('#clear').click(function() {
  $('#signature').signature('clear');
 });

 // Get JSON response and show preview
 $('#but_prev').click(function() {
  var output = $('#signature').signature('toJSON');
  $('#json_output').val(output);
  $('#prev').signature('draw', $('#json_output').val()); 
 });
 $('#prev').signature({disabled: true}); 
});
</script>

<!-- Signature -->
<div id="signature"></div>
<div style="clear: both;"><button id="clear">Clear</button> 
 <button id="but_prev">Preview</button>
</div>
<textarea id='json_output'></textarea><br/>

<!-- Preview -->
<div id='prev'></div>

Output

Draw your signature and click the preview button.

---

 

4. Conclusion

In the demonstration, I show you some simple examples using jQuery plugins which you can easily implement within your project and you can save the generated value in your database table for later use or download it as image format.

You can learn more about these plugins and various other features from their documentation and examples.

참고 : http://willowsystems.github.io/jSignature/#/about/