Digital signature in

In this article i am going to explain how to create digital signature in I am using Signature pad jquery. It is HTML5 canvas based. You can download it from <a href=""> here</a>

The status of this resource is Pending and require some modification by the author.

In this article i am going to explain how to create digital signature in I am using Signature pad jquery. It is HTML5 canvas based. You can download it from here

HTML Markup of webform

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Signature.aspx.cs" Inherits="Signature" %>

digital signature

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

var wrapper = document.getElementById("signature-pad");
var clearButton = wrapper.querySelector("[data-action=clear]");
var canvas = wrapper.querySelector("canvas");
var signaturePad = new SignaturePad(canvas);
// save button
var saveButton = wrapper.querySelector("[data-action=save]");

// Adjust canvas coordinate space taking into account pixel ratio,
// to make it look crisp on mobile devices.
// This also causes canvas to be cleared.
function resizeCanvas() {
// When zoomed out to less than 100%, for some very strange reason,
// some browsers report devicePixelRatio as less than 1
// and only part of the canvas is cleared then.
var ratio = Math.max(window.devicePixelRatio || 1, 1);

// This part causes the canvas to be cleared
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);

// This library does not listen for canvas changes, so after the canvas is automatically
// cleared by the browser, SignaturePad#isEmpty might still return false, even though the
// canvas looks empty, because the internal data of this library wasn't cleared. To make sure
// that the state of this library is consistent with visual state of the canvas, you
// have to clear it manually.

// On mobile devices it might make more sense to listen to orientation change,
// rather than window resize events.
window.onresize = resizeCanvas;

function download(dataURL, filename) {
var blob = dataURLToBlob(dataURL);
var url = window.URL.createObjectURL(blob);

var a = document.createElement("a"); = "display: none";
a.href = url; = filename;



// One could simply use Canvas#toBlob method instead, but it's just to show
// that it can be done using result of SignaturePad#toDataURL.
function dataURLToBlob(dataURL) {
// Code taken from
var parts = dataURL.split(';base64,');
var contentType = parts[0].split(":")[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);

for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);

return new Blob([uInt8Array], { type: contentType });

clearButton.addEventListener("click", function (event) {

saveButton.addEventListener("click", function (event) {
if (signaturePad.isEmpty()) {
alert("Please provide signature first.");
} else {
document.getElementById("hfimg").value = signaturePad.toDataURL();

protected void Button1_Click(object sender, EventArgs e)
string signature = hfimg.Value;
string concat = signature.Replace("data:image/png;base64,", "");
byte[] imageBytes = Convert.FromBase64String(concat);
MemoryStream ms = new MemoryStream(imageBytes, 0,imageBytes.Length);
// Convert byte[] to Image
ms.Write(imageBytes, 0, imageBytes.Length);
System.Drawing.Image image = System.Drawing.Image.FromStream(ms, true);
//save image
image.Save(Server.MapPath("~/ScreenShot/"+Guid.NewGuid()+".png"), ImageFormat.Png);

Check this article :


No responses found. Be the first to comment...

  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name: