Javascript signature demo

来源：互联网发布：alexa mini软件下载编辑：程序博客网时间：2024/04/28 10:35

1. Save Jquery Sinature file as jquery.signature.js:

/* http://keith-wood.name/signature.html
   Signature plugin for jQuery UI v1.1.0.
   Requires excanvas.js in IE.
   Written by Keith Wood (kbwood{at}iinet.com.au) April 2012.
   Available under the MIT (https://github.com/jquery/jquery/blob/master/MIT-LICENSE.txt) license.
   Please attribute the author if you use it. */

(function($) { // Hide scope, no $ conflict

var signatureOverrides = {

// Global defaults for signature
options: {
  background: 'transparent',//'#ffffff', // Colour of the background
  color: '#000000', // Colour of the signature
  thickness: 3, // Thickness of the lines
  guideline: true, // Add a guide line or not?
  guidelineColor: '#c0c0c0', // Guide line colour
  guidelineOffset: 50, // Guide line offset from the bottom
  guidelineIndent: 10, // Guide line indent from the edges
  notAvailable: 'Your browser doesn\'t support signing', // Error message when no canvas
  syncField: null, // Selector for synchronised text field
  change: null // Callback when signature changed
},

/* Initialise a new signature area. */
_create: function() {
  this.element.addClass(this.widgetFullName || this.widgetBaseClass);
  try {
   this.canvas = $('<canvas id="signature_canvas" width="' + this.element.width() + '" height="' +
    this.element.height() + '">' + this.options.notAvailable + '</canvas>')[0];
   this.element.append(this.canvas);
   this.ctx = this.canvas.getContext('2d');
  }
  catch (e) {
   $(this.canvas).remove();
   this.resize = true;
   this.canvas = document.createElement('canvas');
   this.canvas.setAttribute('id', "signature_canvas");
   this.canvas.setAttribute('width', this.element.width());
   this.canvas.setAttribute('height', this.element.height());
   this.canvas.innerHTML = this.options.notAvailable;
   this.element.append(this.canvas);
   if (G_vmlCanvasManager) { // Requires excanvas.js
    G_vmlCanvasManager.initElement(this.canvas);
   }
   this.ctx = this.canvas.getContext('2d');
  }
  this._refresh(true);
  this._mouseInit();
},

/* Refresh the appearance of the signature area.
    @param init (boolean, internal) true if initialising */
_refresh: function(init) {
  if (this.resize) {
   var parent = $(this.canvas);
   $('div', this.canvas).css({width: parent.width(), height: parent.height()});
  }

  this.ctx.fillStyle = this.options.background;
  this.ctx.strokeStyle = this.options.color;
  this.ctx.lineWidth = this.options.thickness;
  this.ctx.lineCap = 'round';
  this.ctx.lineJoin = 'round';
  this.clear(init);
},

/* Clear the signature area.
    @param init (boolean, internal) true if initialising */
clear: function(init) {
  this.ctx.fillRect(0, 0, this.element.width(), this.element.height());
  if (this.options.guideline) {
   this.ctx.save();
   this.ctx.strokeStyle = this.options.guidelineColor;
   this.ctx.lineWidth = 1;
   this.ctx.beginPath();
   this.ctx.moveTo(this.options.guidelineIndent,
    this.element.height() - this.options.guidelineOffset);
   this.ctx.lineTo(this.element.width() - this.options.guidelineIndent,
    this.element.height() - this.options.guidelineOffset);
   this.ctx.stroke();
   this.ctx.restore();
  }
  this.lines = [];
  if (!init) {
   this._changed();
  }
},

reinit: function() {
$(this.canvas).remove();
this._create();
},

/* Synchronise changes and trigger change event.
    @param event (Event) the triggering event */
_changed: function(event) {
  if (this.options.syncField) {
   $(this.options.syncField).val(this.toJSON());
  }
  this._trigger('change', event, {});
},

/* Custom options handling.
    @param options (object) the new option values */
_setOptions: function(options) {
  if (this._superApply) {
   this._superApply(arguments); // Base widget handling
  }
  else {
   $.Widget.prototype._setOptions.apply(this, arguments); // Base widget handling
  }
  this._refresh();
},

/* Determine if dragging can start.
    @param event (Event) the triggering mouse event
    @return (boolean) true if allowed, false if not */
_mouseCapture: function(event) {
  return !this.options.disabled;
},

/* Start a new line.
    @param event (Event) the triggering mouse event */
_mouseStart: function(event) {
  this.offset = this.element.offset();
  this.offset.left -= document.documentElement.scrollLeft || document.body.scrollLeft;
  this.offset.top -= document.documentElement.scrollTop || document.body.scrollTop;
  this.lastPoint = [this._round(event.clientX - this.offset.left),
   this._round(event.clientY - this.offset.top)];
  this.curLine = [this.lastPoint];
  this.lines.push(this.curLine);
},

/* Track the mouse.
    @param event (Event) the triggering mouse event */
_mouseDrag: function(event) {
  var point = [this._round(event.clientX - this.offset.left),
   this._round(event.clientY - this.offset.top)];
  this.curLine.push(point);
  this.ctx.beginPath();
  this.ctx.moveTo(this.lastPoint[0], this.lastPoint[1]);
  this.ctx.lineTo(point[0], point[1]);
  this.ctx.stroke();
  this.lastPoint = point;
},

/* End a line.
    @param event (Event) the triggering mouse event */
_mouseStop: function(event) {
  this.lastPoint = null;
  this.curLine = null;
  this._changed(event);
},

/* Round to two decimal points.
    @param value (number) the value to round
    @return (number) the rounded value */
_round: function(value) {
  return Math.round(value * 100) / 100;
},

/* Convert the captured lines to JSON text.
    @return (string) the JSON text version of the lines */
toImage: function() {
  var signature = "";
  try{

   var signature_canvas = document.getElementById('signature_canvas');
   signature = signature_canvas.toDataURL("img/png").split(",")[1];

  }catch(e){return e;}

  return signature;
},

/* Convert the captured lines to JSON text.
    @return (string) the JSON text version of the lines */
toJSON: function() {
  var json = '{"lines":[';
  var lineSep = '';
  $.each(this.lines, function() {
   json += lineSep + '[';
   var pointSep = '';
   $.each(this, function() {
    json += pointSep + '[' + this[0] + ',' + this[1] + ']';
    pointSep = ',';
   });
   json += ']';
   lineSep = ',';
  });
  json += ']}';
  return json;
},

/* Draw a signature from its JSON description.
    @param sigJSON (object) object with attribute lines
                     being an array of arrays of points or
                     (string) text version of the JSON */
draw: function(sigJSON) {
  this.clear(true);
  if (typeof sigJSON == 'string') {
   sigJSON = $.parseJSON(sigJSON);
  }
  this.lines = sigJSON.lines || [];
  var ctx = this.ctx;
  $.each(this.lines, function() {
   ctx.beginPath();
   $.each(this, function(i) {
    ctx[i == 0 ? 'moveTo' : 'lineTo'](this[0], this[1]);
   });
   ctx.stroke();
  });
  this._changed();
},

/* Determine whether or not any drawing has occurred.
@return (boolean) true if not signed, false if signed */
isEmpty: function() {
return this.lines.length == 0;
},

/* Remove the signature functionality. */
_destroy: function() {
  this.element.removeClass(this.widgetFullName || this.widgetBaseClass);
  $(this.canvas).remove();
  this.canvas = this.ctx = this.lines = null;
  this._mouseDestroy();
}
};

if (!$.Widget.prototype._destroy) {
$.extend(signatureOverrides, {
  /* Remove the signature functionality. */
  destroy: function() {
   this._destroy();
   $.Widget.prototype.destroy.call(this); // Base widget handling
  }
});
}

if ($.Widget.prototype._getCreateOptions === $.noop) {
$.extend(signatureOverrides, {
  /* Restore the metadata functionality. */
  _getCreateOptions: function() {
   return $.metadata && $.metadata.get(this.element[0])[this.widgetName];
  }
});
}

/* Signature capture and display.
Depends on jquery.ui.widget, jquery.ui.mouse. */
$.widget('kbw.signature', $.ui.mouse, signatureOverrides);

// Make some things more accessible
$.kbw.signature.options = $.kbw.signature.prototype.options;

})(jQuery);

2. Save jSignature as jSignature.min.js

/*

jSignature v2 "2012-11-01T22:48" "commit ID 1c15dfafecc75925c3b7d529356a558b59220edb"
Copyright (c) 2012 Willow Systems Corp http://willow-systems.com
Copyright (c) 2010 Brinley Ang http://www.unbolt.net
MIT License <http://www.opensource.org/licenses/mit-license.php>

Simplify.js BSD
(c) 2012, Vladimir Agafonkin
mourner.github.com/simplify-js

base64 encoder
MIT, GPL
http://phpjs.org/functions/base64_encode
+   original by: Tyler Akins (http://rumkin.com)
+   improved by: Bayron Guevara
+   improved by: Thunder.m
+   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+   bugfixed by: Pellentesque Malesuada
+   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+   improved by: Rafal Kukawski (http://kukawski.pl)

jSignature v2 jSignature's Undo Button and undo functionality plugin

jSignature v2 jSignature's custom "base30" format export and import plugins.

jSignature v2 SVG export plugin.

3. demo.html :

/*Signature*/
.kbw-signature { width: 500px; height: 250px; border: 1px solid #000000;}

#signature
{
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0;
    border: 1px solid;
}

#signature_box
{
    width: 100%;
    margin: auto;
    text-align: center;
}

#signature_container
{
    width: 400px;
    height: 140px;
    border: 3 solid #000000;
    padding: 0;
    cursor: pointer;
    text-align: center;
}

#clear_signature
{
    font-weight: 100;
    text-decoration: underline;
    cursor: pointer;
}

</style>

<body>
<div id="signature_container" onclick="sigflyout();">
                                                </div>

      <span>Client's Signature</span>
      <span id="clear_signature" onclick="clearsig();">Clear</span>

      <div id="signature_flyout" style="display: none; z-index: 1000; position: absolute;
                background-color: white; left: 30%; top: 35%;">
                <div id="sig" >
                </div>
                <br />
                <div style="float: right">
                    <input type="button" value="Clear" id="clear" />
                    <input type="button" value="Done" id="toimg" />
                </div>
            </div>
            <div id="div_signature_background" style="position: fixed; display: none; left: 0;
                right: 0; top: 0; bottom: 0; z-index: 10; background-color: grey; opacity: 0.4">
            </div>
</body>
<script>

(function initS() {

                    var currentData = $("#hdnSignatureData").val();
                    if (currentData) {
                        document.getElementById("signature_container").innerHTML =
    '  <img width=200 height=100 src="data:image/png;base64,' + currentData + '" >';
                    }

                    $("#sig").signature();
                    $("#clear").click(function () {
                        $("#sig").signature("reinit");
                        $("#hdnSignatureData").val("");

                        //$('#sig').signature();
                    });
                    $("#toimg").click(function () {
                        //alert($('#sig').signature('toImage'));
                        var imgBytes = $("#sig").signature("toImage");

                        document.getElementById("signature_container").innerHTML =
    '  <img width=200 height=100 src="data:image/png;base64,' + imgBytes + '" >';
                        $("#hdnSignatureData").val(imgBytes);

$("#sig").signature("reinit");

closesigflyout();

                        $("#edas_loading_background").show();
                        $("#edas_loading_img").show();

                        //__doPostBack("FinishSignature", '');
                    });

})();

function sigflyout() {

                    $('#signature_flyout').show();
                    $("#div_signature_background").show();
                }

                function closesigflyout() {
                    $("#signature_flyout").hide();
                    $("#div_signature_background").hide();
                }

                function clearsig() {
                    document.getElementById("signature_container").innerHTML = "";
                    $("#hdnSignatureData").val("");
                }

</script>
</html>

0 0