Signature capture from signature pad in Web Application asp.net using c# (or) web signature capture asp net using mouse asp.net

In this post I Explained about capture the signature from signature pad to connect the Web application.  You have to use web signuature pad for this application.

.aspx code

<form id="form1" runat="server">

        <asp:HiddenField ID="HiddenField1" runat="server" />

        <div id="wPaint" style="position:relative; width:1200px; height:500px; background:#ACACAC; border:solid black 1px; overflow:hidden;"></div>

        <asp:Button ID="BtnSign" runat="server" Text="Save" CssClass="button" OnClientClick="javascript:saveImage();" onclick="BtnSign_Click" />

        <asp:Button ID="BtnClearSign" runat="server" Text="Clear" CssClass="button" OnClientClick="javascript:loadImage();" />

       

        <script type="text/javascript">

                $("#wPaint").wPaint({

                      image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAECAQGDHihRBAIECBAgYND9AAECBAgQCAgY9ECJIhAgQIAAAYPuBwgQIECAQEDAoAdKFIEAAQIECBh0P0CAAAECBAICBj1QoggECBAgQMCg+wECBAgQIBAQMOiBEkUgQIAAAQIG3Q8QIECAAIGAgEEPlCgCAQIECBAw6H6AAAECBAgEBAx6oEQRCBAgQICAQfcDBAgQIEAgIGDQAyWKQIAAAQIEDLofIECAAAECAQGDHihRBAIECBAgYND9AAECBAgQCAgY9ECJIhAgQIAAgQMI/gEtiL4PDAAAAABJRU5ErkJggg==",

                      drawDown: function(e, element){ $("#canvasDown").val(element.settings.mode +": " + e.pageX + ',' + e.pageY); },

                      drawMove: function(e, element){ $("#canvasMove").val(element.settings.mode +": " + e.pageX + ',' + e.pageY); },

                      drawUp: function(e, element){ $("#canvasUp").val(element.settings.mode +": " + e.pageX + ',' + e.pageY); }

                });

                function loadImage()

                {

                      $("#wPaint").wPaint("image", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQCBj1QoggECBAgQMCg+wECBAgQIBAQMOiBEkUgQIAAAQIG3Q8QIECAAIGAgEEPlCgCAQIECBAw6H6AAAECBAgEBAx6oEQRCBAgQICAQfcDBAgQIEAgIGDQAyWKQIAAAQIEDLofIECAAAECAQGDHihRBAIECBAgYND9AAECBAgQCAgY9ECJIhAgQIAAgQMI/gEtiL4PDAAAAABJRU5ErkJggg==");

                }

                function saveImage()

                {

                      var imageSignData = $("#wPaint").wPaint("image");

                    document.getElementById('<%= HiddenField1.ClientID %>').value = imageSignData;

                }

          </script>                                

    </form>

.cs page code

using System;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Xml.Linq;

using System.IO;

using System.Drawing;

using System.Diagnostics;

using System.Collections.Generic;

using System.ComponentModel;

using System.Text;

using System.Drawing.Imaging;

namespace company

{

    public partial class WebSign : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

        }

        protected void BtnSign_Click(object sender, EventArgs e)

        {

            try

            {

                string PATH = Server.MapPath(ResolveUrl("~\\"));

                string strPhoto = HiddenField1.Value; //Get the image from flash file

                int l = strPhoto.Length;

                strPhoto = strPhoto.Substring(22, l - 22);

                byte[] photo = Convert.FromBase64String(strPhoto);

                FileStream fs = new FileStream(PATH + "Sign.png", FileMode.OpenOrCreate, FileAccess.Write);

                BinaryWriter br = new BinaryWriter(fs);

                br.Write(photo);

                br.Flush();

                br.Close();

                fs.Close();

                string script2 = "alert('Signature Saved..');";

                System.Web.HttpContext.Current.Response.Write("<script language=\"javascript\">" + script2 + "</script>");

                InvertImage();

            }

            catch (Exception Ex)

            {

                string script3 = "alert('" + Ex + "');";

                System.Web.HttpContext.Current.Response.Write("<script language=\"javascript\">" + script3 + "</script>");

            }

        }

        protected void InvertImage()

        {

            Bitmap bimg = (Bitmap)System.Drawing.Image.FromFile(Server.MapPath("~\\Sign.png"));

            Bitmap img = null;

            img = new Bitmap(bimg.Width, bimg.Height);

            for (int x = 0; x < bimg.Width; x++)

            {

                for (int y = 0; y < bimg.Height; y++)

                {

                    //Get the color

                    Color clr = bimg.GetPixel(x, y);

                    //Invert the clr

                    clr = Color.FromArgb(255 - clr.R, 255 - clr.G, 255 - clr.B);

                    //Update the color

                    img.SetPixel(x, y, clr);

                }

            }

            bimg.Dispose();

            img.Save(Server.MapPath("~\\Signature.jpg"), System.Drawing.Imaging.ImageFormat.Jpeg);

        }

    }

}