签名板-多个签名板可将图像传输到sql和2个清除按钮和一个提交按钮 asp net c＃jQuery的

问题描述

我用一个画布创建了签名页。我能够将数据从签名传递到我的sql数据库，以及显示图像的预览。我希望能够对同一页面上的第二个签名画布执行相同的操作。我可以显示第二个画布，但是签名显示不成比例，第二个清除按钮不起作用，第二个到sql的数据不起作用。

帮助！拜托！

这是我的html

                                <div id="signature-pad" class="signature-pad container-fluid">
                                    <div class="signature-pad--body">
                                        <canvas id="signature-pad3" class="signature-pad"></canvas>
                                    </div>
                                    <div class="signature-pad--footer">
                                        <div class="description">Sign above</div>
                                        <div class="signature-pad--actions">

                                            <center><button type="button" class="button clear" data-action="clear" >Clear</button>


                                                    <input type='button' id='click' value='Validate'></center>



                                            <br />
                                            <textarea id="output3" name="output" style='display: none;'></textarea><br />
                                            <asp:Button type="button" ID="Button1" runat="server" class="button save" data-action="save-jpg" Text="Submit Signature" OnClick="submit_Click"></asp:Button>
                                            </div>

                                        </div>
                                    </div>
                                 <img src='' id='sign_prev3' style='display: none;' width="300px" height="150px" />
                                </div>

<div class="wrapper" id="ParentSig" runat="server">
                                <div id="signature-pad" class="signature-pad container-fluid">
                                    <div class="signature-pad--body">
                                        <canvas id="signature-pad4" class="signature-pad"></canvas>
                                    </div>
                                    <div class="signature-pad--footer">
                                        <div class="description">Sign above</div>
                                        <div class="signature-pad--actions">

                                            <center><button type="button" class="button clear" data-action="clear" >Clear</button>
                                                    <input type='button' id='click' value='Validate'></center>
                                            <br />
                                            <textarea id="output4" name="output" style='display: none;'></textarea><br />
                                            <asp:Button type="button" ID="submit" runat="server" class="button save" data-action="save-jpg" Text="Submit Signature" OnClick="submit_Click"></asp:Button>
                                            </div>

                                        </div>
                                    </div>
                                 <img src='' id='sign_prev4' style='display: none;' width="300px" height="150px" />
                                </div>

我的脚本

<script>
        $(document).ready(function () {
            var signaturePad = new SignaturePad(document.getElementById('signature-pad2'));

            $('#click').click(function () {
                var data = signaturePad.toDataURL('image/png');
                $('#output').val(data);

                $("#sign_prev").show();
                $("#sign_prev").attr("src",data);
                // Open image in the browser
                //window.open(data);
            });
        })
    </script>

     <script>
         $(document).ready(function () {
             var signaturePad = new SignaturePad(document.getElementById('signature-pad3'));

             $('#click').click(function () {
                 var data = signaturePad.toDataURL('image/png');
                 $('#output2').val(data);

                 $("#sign_prev2").show();
                 $("#sign_prev2").attr("src",data);
                 // Open image in the browser
                 //window.open(data);
             });
         })
     </script>

后面的代码是

void SubmitSession3()
        {

            try
            {
                string data = Request.Form["output"];
               

                Response.Write("<script>alert('" + Session["npi"].ToString() + "');</script>");

                sqlConnection con = new sqlConnection(strcon);
                if (con.State == ConnectionState.Closed)
                {
                    con.open();
                }

                
                sqlCommand cmd = new sqlCommand("insert into session_note_data_tbl(parent_img) values(@parent_img)",con);


                
                cmd.Parameters.AddWithValue("@parent_img",data);
                


                cmd.ExecuteNonQuery();
                con.Close();
                Response.Write("<script>alert('Session submitted');</script>");

            }
            catch (Exception ex)
            {
                Response.Write("<script>alert('" + ex.Message + "');</script>");
            }


        }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）