locked
Signature Field RRS feed

  • Question

  • User102064424 posted

    Hello all,

    i have a problem in asp.net.

    I need to create a Web Formular where you can add some details and after that you need to set your signature on the Formular.

    My problem is that i dont know how i could programm this signature feature. 

    I need to get a field where i can write my signature with a pen on my tablet and save an image file of this in database.

    I hope anyone could help me with that.

    Tuesday, December 18, 2018 2:18 PM

All replies

  • User-893317190 posted

    Hi KevinH95,

    Do you mean you want to save your signature image into database through web form?

    If so, you could use jSignature  to help generate the image of users' jSignature.You could refer to the link below to download jSignature and learn more about jSignature.

    https://github.com/brinley/jSignature

    <head runat="server">
        <title></title>
        <script src="singnaturejs/jquery.js"></script>
        <!-- this, preferably, goes inside head element: -->
    <!--[if lt IE 9]>
    <script src="singnaturejs/flashcanvas.js"></script>
    
    <![endif]-->
    
    
    <!-- you load jquery somewhere before jSignature ... -->
        <script src="singnaturejs/jSignature.min.js"></script>
    <script>
        $(document).ready(function() {
    var arguments = {
                width: '100%',
                height: '100%',
                color:'#000',
                "decor-color": "transparent",
                lineWidth: '3'
            };
    
            $("#signature").jSignature(arguments);
        })
    function saveData(){
    var datapair=$("#signature").jSignature("getData");//get the date of the signature
       //set the hiddenfield's value to the data to pass it to the sever
        $("#HiddenField1").val(datapair);
    
    }
    function clearData(){
    //clear the content
    $("#signature").jSignature("clear");
    
    }
    </script>
    </head>
    <body>
        <form id="form1" runat="server">
            
    <div id="signature" style="border:1px solid black;width:200px"></div>
    
    
            <asp:HiddenField ID="HiddenField1" runat="server" />
           product name: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
       <asp:Button ID="Button1" runat="server" Text="submit" OnClientClick="saveData()" OnClick="Button1_Click" />
              <asp:Button ID="Button2" runat="server" Text="clear" OnClientClick="return clearData()"  />
        </form>
    </body>
    </html>

    Code behind.

      private static string constr = ConfigurationManager.ConnectionStrings["WingtipToysConnectionString2"].ConnectionString;
    
    
    
    
            protected void Button1_Click(object sender, EventArgs e)
            {
                string base64 = this.HiddenField1.Value.Substring(22);//get the base64 string,it countains the string representing the image
                byte[] bytes = Convert.FromBase64String(base64);//convert it into byte
                string fileName = DateTime.Now.ToString("dd-MM-yy-hh-mm-ss") + ".jpg"; // give the image a name
                File.WriteAllBytes(Server.MapPath("/images/WingtipToys/" + fileName), bytes);//save the image
               
    
                using (SqlConnection con = new SqlConnection(constr))
                {                                                               //save the path of the image
                    using (SqlCommand com = new SqlCommand("insert into Products (ProductName,ImagePath) values(@pro,@path)", con))
                    {
                        com.Parameters.AddWithValue("pro", TextBox1.Text);
                        com.Parameters.AddWithValue("path", fileName);
                        con.Open();
                        com.ExecuteNonQuery();
                    }
                }
            }

    About how to show it, you could refer to

     <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
                <Columns>
                    <asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" />
                    <asp:TemplateField>
                        <ItemTemplate>
    <!--use a image control and set its ImageUrl to its folder plus its name--> <asp:Image ID="Image1" runat="server" ImageUrl='<%# "/images/WingtipToys/"+Eval("ImagePath") %>' /> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="ImagePath" HeaderText="ImagePath" SortExpression="ImagePath" /> </Columns> </asp:GridView>

    Best regards,

    Ackerly Xu

    Wednesday, December 19, 2018 2:43 AM