Convert Canvas Image to PDF and save in Folder (Directory) using C# and VB.Net in ASP.Net

IamAzhar says:

byte[] imageBytes = Convert.FromBase64String(base64);

You need to remove data:image/png;base64, from base64 string to convert to byte array.

IamAzhar says:

Response.Clear();

             Response.ContentType = "application/pdf";

             Response.AddHeader("Content-Disposition", "attachment; filename=Image.pdf");

             Response.ContentType = "application/pdf";

             Response.Buffer = true;

             Response.Cache.SetCacheability(HttpCacheability.NoCache);

             Response.BinaryWrite(bytes);

             Response.End();

Need to replace the above lone of code with File class WriteAllBytes method.

Refer below sample.

HTML

<asp:HiddenField ID="ImageVal" runat="server" Value="" />
<div class="tools">
    <a href="#colors_sketch" data-tool="marker">Marker</a> <a href="#colors_sketch" data-tool="eraser">Eraser</a>
</div>
<br />
<div style="border: 3px solid black">
    <canvas id="colors_sketch" width="500" height="200"></canvas>
</div>
<br />
<br />
<%--<input type="button" id="btnSave" value="Save as Image" runat="server" onserverclick="OnUpload" />--%>
<asp:Button ID="btnSave" Text="Save as Image" OnClick="OnUpload" runat="server" />
<hr />
<img id="imgCapture" alt="" style="display: none; border: 1px solid #ccc" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/mobomo/sketch.js/master/lib/sketch.min.js" type="text/javascript"></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);
            $('[Id*=ImageVal]').val(base64);
        });
    });
</script>

Code

C#

protected void OnUpload(object sender, EventArgs e)
{
    string base64 = ImageVal.Value.ToString();
    byte[] imageBytes = Convert.FromBase64String(base64.Replace("data:image/png;base64,", ""));
    iTextSharp.text.Image image = iTextSharp.text.Image.GetInstance(imageBytes);
    using (System.IO.MemoryStream memoryStream = new System.IO.MemoryStream())
    {
        iTextSharp.text.Document document = new iTextSharp.text.Document(iTextSharp.text.PageSize.A4, 88f, 88f, 10f, 10f);
        iTextSharp.text.pdf.PdfWriter writer = iTextSharp.text.pdf.PdfWriter.GetInstance(document, memoryStream);
        document.Open();
        document.Add(image);
        document.Close();
        byte[] bytes = memoryStream.ToArray();
        memoryStream.Close();
        System.IO.File.WriteAllBytes(Server.MapPath("~/Signature.pdf"),bytes);
    }
}

VB.Net

Protected Sub OnUpload(ByVal sender As Object, ByVal e As EventArgs)
    Dim base64 As String = ImageVal.Value.ToString()
    Dim imageBytes As Byte() = Convert.FromBase64String(base64.Replace("data:image/png;base64,", ""))
    Dim image As iTextSharp.text.Image = iTextSharp.text.Image.GetInstance(imageBytes)
    Using memoryStream As System.IO.MemoryStream = New System.IO.MemoryStream()
        Dim document As iTextSharp.text.Document = New iTextSharp.text.Document(iTextSharp.text.PageSize.A4, 88F, 88F, 10F, 10F)
        Dim writer As iTextSharp.text.pdf.PdfWriter = iTextSharp.text.pdf.PdfWriter.GetInstance(document, memoryStream)
        document.Open()
        document.Add(image)
        document.Close()
        Dim bytes As Byte() = memoryStream.ToArray()
        memoryStream.Close()
        System.IO.File.WriteAllBytes(Server.MapPath("~/Signature.pdf"), bytes)
    End Using
End Sub