2X faster development
The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
DescriptionThe ASP.NET Web Forms Signature control by default records the drawn signature in Base64 string format for later regeneration. Hence, we can use this to store and retrieve the signature in SQL database. SolutionTo store the drawn signature image in the SQL database, follow the steps below:
Refer to the code for control creation - [Default.aspx] <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager> <div class="frame "> <h2>Signature:</h2> <div class="control"> <ej:Signature ID="Signature1" Height="400px" StrokeWidth="3" IsResponsive="true" runat="server"></ej:Signature> // Render signature control </div> <input id="btnUpload" type="button" value="Upload data to Database" onclick="Uploaddata()" /> // Render button for upload data into data base <input id="btnclear" type="button" value="Clear" onclick="onclear()" /> // Render button for clear the singnature <input id="btnget" type="button" value="Retrive image from Database" onclick="Getdata()" /> // Render button for get the data from data base </div> <script> // function to convert the image to Base64 string value and then passing it to the database function Uploaddata() { var target = $("#<%=Signature1.ClientID%>").ejSignature("instance")._canvas[0].toDataURL() PageMethods.Upload(target, onSucess, onError); function onSucess(response) { alert("succesfully sent to datasource") } function onError(response) { alert('Something wrong.'); } } // function to retrieve the signature content from the database function Getdata() { PageMethods.Getuploaddata(onSucess, onError); function onSucess(response) { var obj = $("#<%=Signature1.ClientID%>").ejSignature("instance"); // Create object for signature control canvas = obj._canvas[0]; ctx = canvas.getContext("2d"); var img = new Image; img.src = response; ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear specified pixel ctx.drawImage(img, 0, 0); obj.refresh(); } function onError(response) { alert('Something wrong.'); } } function onclear() { // Triggered when you click the clear button var obj = $("#<%=Signature1.ClientID%>").ejSignature("instance"); // Created object for signature control obj.clear(); // Clear the signature control using clear public method } </script>
// method to store the signature content in the database table [System.Web.Services.WebMethod] public static string Upload(string target) { // Convert string into stream var stream = new MemoryStream(); var writer = new StreamWriter(stream); writer.Write(target); writer.Flush(); stream.Position = 0; SqlConnection con = new SqlConnection(@"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=D:\David\WebSample\App_Data\Signaturedata.mdf;Integrated Security=True;Connect Timeout=30"); // Set your system local database file location con.Open(); string query = "INSERT INTO newData (DataValue) VALUES ('" + stream+ "')"; SqlCommand cmd = new SqlCommand(query); cmd.Connection = con; cmd.ExecuteNonQuery(); con.Close(); return target; } // method to retrieve the stored signature content from database [System.Web.Services.WebMethod] public static string Getuploaddata() { using (SqlConnection conn = new SqlConnection(@"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename= D:\David\WebSample\App_Data\Signaturedata.mdf;Integrated Security=True;Connect Timeout=30")) // Your database path using (SqlCommand command = new SqlCommand("SELECT DataValue FROM newData")) { command.Connection = conn; conn.Open(); SqlDataReader reader = command.ExecuteReader(); if (reader.Read()) { return reader.GetString(0); } return null; } }
ResultThe below image shown, when the signature image is updated successfully on the database.
The below image shown, after retrieving the signature image from database.
|
2X faster development
The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
How can we do something similar in ASP NET Core?
How is can you save the signature to a file, using webforms?
Hi Corando,
Please refer the below KB to know about saving the Signature file to a folder.
https://www.syncfusion.com/kb/7976/how-to-save-the-signature-image-to-a-folder-in-an-application
This is half cooked code, It will not render the image on control until we add below two lines: img.onload = function () { context.drawImage(img, 0, 0); }
Reference: https://www.syncfusion.com/forums/148177/repopulate-signature-control