JSFiddle - React, Tailwind, and code Playground

by Karen Maritz

HTML

<div id="dialogSignature" runat="server"  align="left" style="padding-top:10px; display:none; ">
<canvas id="myCanvas" width="400" height="200" style="border:2px solid;" runat="server"></canvas>
            <img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">
            

            <table>
                <tr>
                    <td colspan="2">
                        <asp:Label ID="lblSignDetailsRequired" runat="server" Text="" ForeColor="Red" Font-Size="10pt"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="Clear" id="clr" size="23" onclick="erase()" class="myButton" >
                    </td>
                    <td>
                        <%--<button class="myButton" onclick="javascript:UploadPic();return false;">Sumbit</button>--%>
                        <asp:Button ID="btnSubmitSignature"  OnClick="btnSubmitSignature_Click" CssClass="myButton"  runat="server" Text="Submit" /> <%--OnClientClick="javascript:UploadPic();return false;"--%>
                    </td> 
                </tr>
            </table>
            </div>

JavaScript

function UploadPic() {

             var scopeIdentityUse = "<%=scopeIdentityJS1%>";

             var Pic = document.getElementById("myCanvas").toDataURL("image/png");
            Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")

            $.ajax({
                type: 'POST',
                url: 'Save_Picture.aspx/UploadPic',
                data: '{ "imageData" : "' + Pic + '", "param" : "' + scopeIdentityUse + '" }',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (msg) {
                      alert("successful!");
                }
            });
         }