I recently read about an article on Capture Signature using HTML5 Canvas using jQuery
I tried to use that knowledge and apply in my application – which is about creating a receipt template for users to add items and prices, after which they will sign before printing it out. But after I followed the article and applied everything as shown, the signature did not sign when I used the touch pad to try to sign the signature. The cursor was just moving but nothing was drawing.
I really want to apply this signature feature to my receipt application but with a little twist; please help me to make the digital signature work and save a digital signature into database using canvas. Then I will want to display the signature on another page.
I have a logo on the receipt too, so there are two images that will be saved into database.
Here is my full HTML and (C#) code that I used to save data into database.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous" />
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
<link href="http://fonts.cdnfonts.com/css/renogare" rel="stylesheet" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
<div>
<div class="parent">
<div class="child" id="midcont" style="width: 100%;">
<div style="height: auto;">
<div class="heading" style="text-align: right;">
<asp:Label ID="Label4" runat="server" Font-Size="X-Large" Font-Names="Be Vietnam" ForeColor="#145c7c" Text="RECEIPT"></asp:Label>
</div>
</div>
<hr style="margin-top: 0%;" />
<asp:FileUpload ID="fuUpload" runat="server" Style="display: none" />
<asp:Image ID="imgFileUpload" ImageUrl="Test.png" runat="server" Width="60" Height="60" />
<div style="float: right;">
<asp:Label ID="Label3" runat="server" Text="Receipt ID:" Font-Bold="true"></asp:Label> <asp:Label ID="receiptlbl" runat="server" Text=""></asp:Label>
</div>
<br />
<div class="company-address">
<asp:Label ID="ftxtname" runat="server" Font-Size="12pt" Font-Bold="true" Height="25px" Width="240px" Text="" />
<br />
<br />
<asp:TextBox ID="ftxtaddress" runat="server" CssClass="form-control" TextMode="MultiLine" Placeholder="Store Address" Height="40px" Font-Size="X-Small" Width="240px" BorderStyle="Solid" BorderWidth="2"></asp:TextBox>
<br />
<asp:TextBox ID="ftxtmail" runat="server" CssClass="form-control" Font-Size="X-Small" placeholder="Store Email" Height="25px" Width="240px" BorderStyle="Solid" BorderWidth="2"></asp:TextBox>
<br />
<asp:TextBox ID="ftxtphone" runat="server" CssClass="form-control" placeholder="Store Phone N°" Font-Size="X-Small" Height="25px" Width="240px" BorderStyle="Solid" BorderWidth="2" onkeypress="return isNumber(event);" />
<br />
<asp:Label ID="Label14" runat="server" Text=""></asp:Label>
</div>
<br />
<div class="invoice-details">
<p style="font-size: 8pt;">CUSTOMER:</p>
<asp:Label ID="Label7" runat="server" Font-Bold="true" Font-Size="X-Small" Text="Name"></asp:Label>
<asp:TextBox ID="txtnat" runat="server" CssClass="form-control" Font-Size="X-Small" Height="25px" Width="240px" BorderStyle="Solid" BorderWidth="2" onkeypress="isLetterKey(event);" />
<asp:Label ID="Label9" runat="server" Font-Bold="true" Font-Size="X-Small" Text="Address"></asp:Label>
<asp:TextBox ID="txtdress" runat="server" CssClass="form-control" Height="40px" Font-Size="X-Small" TextMode="MultiLine" Width="240px" BorderStyle="Solid" BorderWidth="2"></asp:TextBox>
<asp:Label ID="Label12" runat="server" Font-Bold="true" Font-Size="X-Small" Text="Email"></asp:Label>
<asp:TextBox ID="txtmal" runat="server" CssClass="form-control" Font-Size="X-Small" Height="25px" Width="240px" BorderStyle="Solid" BorderWidth="2"></asp:TextBox>
<asp:Label ID="Label13" runat="server" Font-Bold="true" Font-Size="X-Small" Text="Phone N°"></asp:Label>
<asp:TextBox ID="txtfon" runat="server" CssClass="form-control" Font-Size="X-Small" Height="25px" Width="240px" BorderStyle="Solid" BorderWidth="2" onkeypress="return isNumber(event);" />
<asp:Label ID="Label15" runat="server" Font-Bold="true" Font-Size="X-Small" Text="Due Date"></asp:Label>
<asp:TextBox ID="txtdated" runat="server" CssClass="form-control" Font-Size="X-Small" Height="25px" Width="240px" type="date" BorderStyle="Solid" BorderWidth="4"></asp:TextBox>
</div>
<asp:UpdatePanel ID="panel" runat="server">
<ContentTemplate>
<hr />
<div class="total">
<asp:Label ID="Label1" runat="server" Font-Bold="true" Text="SUB TOTAL"></asp:Label>
<asp:Label ID="lblTotal" runat="server" Text=""></asp:Label>
<br />
<br />
<div class="row">
<asp:Label ID="Label5" runat="server" Font-Bold="true" Text="VAT:"></asp:Label>
<asp:TextBox ID="txtVAT" runat="server" CssClass="form-control" Width="120px" Font-Bold="true" Height="22px" Font-Size="8pt" placeholder="Value Added Tax" onkeypress="return onlyNumbersWithDot(event);" />
<asp:Label ID="warnlbl" runat="server" ForeColor="Red" Font-Size="Small" Font-Bold="true" Text=""></asp:Label>
</div>
<br />
<asp:Label ID="Label6" runat="server" Font-Bold="true" Text="GRAND TOTAL:"></asp:Label>
<asp:Label ID="lblGrandTotal" runat="server" Text=""></asp:Label>
<br />
<br />
<br />
<br />
</div>
<div class="dsign">
<asp:Label ID="namesign" runat="server" Font-Size="10pt" Font-Bold="true" Height="25px" Width="240px" Text="Kendal Group & Associates" />
<canvas id="colors_sketch" width="300" height="100" style="border: 1px solid #ccc"></canvas>
<div class="tools">
<a href="#colors_sketch" data-tool="marker">Sign</a> <a href="#colors_sketch" data-tool="eraser">Erase</a>
</div>
<script type="text/javascript">
$(function () {
$('#colors_sketch').sketch();
$(".tools a").eq(0).attr("style", "color:#000");
$(".tools a").click(function () {
$(".tools a").removeAttr("style");
$(this).attr("style", "color:#000");
});
});
</script>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<label style="font-size: 9pt; font-weight: 700;">By signing this document, the customer agrees to the services and conditions described in this documemt.</label>
</div>
</div>
<br />
<div>
<asp:Button ID="Button1" runat="server" CssClass="btn btn-primary" Font-Size="13pt" BackColor="#32657c" Text="Finish"/>
</div>
<br />
</div>
</form>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="http://intridea.github.io/sketch.js/lib/sketch.min.js" type="text/javascript"></script>
</body>
</html>
Code to insert into signature and logo database
C#
protected void Button1_Click(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection("Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\\Dataregister.mdf;Integrated Security=True");
try
{
byte[] image;
Stream s = fuUpload.PostedFile.InputStream;
BinaryReader br = new BinaryReader(s);
image = br.ReadBytes((Int32)s.Length);
decimal total = amount.ToArray().Sum();
decimal grandTotal = total + (total * (Convert.ToDecimal(txtVAT.Text) / 100));
string sqlStatement = "INSERT INTO ReceiptTable (Id,email,fname,faddress,fmail,fphone,Tname,Taddress,Tmail,Tphon,Datdue,Receipt_no,Item,Qty,Rate,Amount,Total,VAT,GrandTotal,CreatedDate,logo) VALUES (@Uid,@email,@fname,@faddress,@fmail,@fphone,@Tname,@Taddress,@Tmail,@Tphon,@Datdue,@Receipt_no,@Item,@Qty,@Rate,@Amount,@Total,@VAT,@GrandTotal,@CreatedDate,@logo)";
con.Open();
SqlCommand cmd = new SqlCommand(sqlStatement, con);
cmd.Parameters.AddWithValue("@Uid", labelid.Text.ToString());
cmd.Parameters.AddWithValue("@email", user.Text.ToString());
cmd.Parameters.AddWithValue("@fname", ftxtname.Text.ToString());
cmd.Parameters.AddWithValue("@faddress", ftxtaddress.Text.ToString());
cmd.Parameters.AddWithValue("@fmail", ftxtmail.Text.ToString());
cmd.Parameters.AddWithValue("@fphone", ftxtphone.Text.ToString());
cmd.Parameters.AddWithValue("@Tname", txtnat.Text.ToString());
cmd.Parameters.AddWithValue("@Taddress", txtdress.Text.ToString());
cmd.Parameters.AddWithValue("@Tmail", txtmal.Text.ToString());
cmd.Parameters.AddWithValue("@Tphon", txtfon.Text.ToString());
cmd.Parameters.AddWithValue("@Datdue", txtdated.Text.ToString());
cmd.Parameters.AddWithValue("@Receipt_no", Labelinvoice.Text.Trim());
cmd.Parameters.AddWithValue("@Item", string.Join(",", item.ToArray()));
cmd.Parameters.AddWithValue("@Qty", string.Join(",", quantity.ToArray()));
cmd.Parameters.AddWithValue("@Rate", string.Join(",", rate.ToArray()));
cmd.Parameters.AddWithValue("@Amount", string.Join(",", amount.ToArray()));
cmd.Parameters.AddWithValue("@Total", total);
cmd.Parameters.AddWithValue("@VAT", txtVAT.Text.ToString());
cmd.Parameters.AddWithValue("@GrandTotal", grandTotal);
cmd.Parameters.AddWithValue("@CreatedDate", DateTime.Now);
cmd.Parameters.AddWithValue("@logo", image);
cmd.CommandType = CommandType.Text;
cmd.ExecuteNonQuery();
}
catch (SqlException ex)
{
string msg = "Insert Error:";
msg += ex.Message;
throw new Exception(msg);
}
finally
{
con.Close();
}
}
