Retain (keep) captured Signature using HTML5 Canvas after ASP.Net UpdatePanel refresh

zogjohnny
 
on Nov 25, 2021 06:47 AM
Sample_194510.zip
1064 Views

How do I use this below within an update panel

Using HTML5 Canvas to capture Signatures with jQuery

when in an update panel, the canvas contents get cleared out when clicking the button to save the canvas content as an image.

 

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
arjunv
 
on Nov 25, 2021 11:23 PM
on Nov 25, 2021 11:24 PM

Hi zogjohnny,

Please refer below Sample.

HTML

<asp:ScriptManager runat="server" />
<asp:UpdatePanel runat="server" ID="updTools">
    <ContentTemplate>
        <div class="tools">
            <a href="#colors_sketch" data-tool="marker">Marker</a>
            <a href="#colors_sketch" data-tool="eraser">Eraser</a>
        </div>
        <br />
        <canvas id="colors_sketch" width="500" height="200"></canvas>
        <br />
        <br />
        <asp:Button Text="Save as Image" runat="server" ID="btnSave" />
        <hr />
        <img id="imgCapture" alt="" />
    </ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mobomo/sketch.js/master/lib/sketch.min.js"></script>
<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");
        });
        $("#btnSave").bind("click", function () {
            var base64 = $('#colors_sketch')[0].toDataURL();
            $("#imgCapture").attr("src", base64);
            $("#imgCapture").show();
            $.ajax({
                type: 'POST',
                url: 'Default.aspx/SaveImage',
                data: '{ "imageData" : "' + base64 + '" }',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (response) {
                    alert('Image saved successfully !');
                }
            });
            return false;
        });
    });
</script>

Namespaces

C#

using System.Web.Services;
using System.IO;

VB.Net

Imports System.Web.Services
Imports System.IO

Code

C#

[WebMethod]
public static void SaveImage(string imageData)
{
    string filePath = HttpContext.Current.Server.MapPath("~/HTML.png");
    using (FileStream fs = new FileStream(filePath, FileMode.Create))
    {
        using (BinaryWriter bw = new BinaryWriter(fs))
        {
            byte[] data = Convert.FromBase64String(imageData.Split(',')[1]);
            bw.Write(data);
            bw.Close();
        }
    }
}

VB.Net

<WebMethod>
Public Shared Sub SaveImage(ByVal imageData As String)
    Dim filePath As String = HttpContext.Current.Server.MapPath("~/HTML.png")
    Using fs As FileStream = New FileStream(filePath, FileMode.Create)
        Using bw As BinaryWriter = New BinaryWriter(fs)
            Dim data As Byte() = Convert.FromBase64String(imageData.Split(","c)(1))
            bw.Write(data)
            bw.Close()
        End Using
    End Using
End Sub

Screenshot