Save (Export) HTML DIV with Image to jpg or png file using HTML Canvas in ASP.Net using C# and VB.Net

Hi nauna,

Refer below code.

HTML

<div id="dvTable" style="width: 340px; background-color: White; padding: 5px">
    <u>Customer Records</u>
    <br />
    <br />
    <table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse: collapse;">
        <tr>
            <th scope="col" style="width: 90px;">Customer Id
            </th>
            <th scope="col" style="width: 120px;">Name
            </th>
            <th scope="col" style="width: 120px;">Country
            </th>
        </tr>
        <tr>
            <td>1</td>
            <td>John Hammond</td>
            <td>United States</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Mudassar Khan</td>
            <td>India</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Suzanne Mathews</td>
            <td>France</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Robert Schidner</td>
            <td>Russia</td>
        </tr>
    </table>
</div>
<br />
<asp:HiddenField ID="hfImageData" runat="server" />
<asp:Button ID="btnExport" Text="Export to Image" runat="server" UseSubmitBehavior="false"
    OnClick="ExportToImage" OnClientClick="return ConvertToImage(this)" />
<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://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script type="text/javascript">
    function ConvertToImage(btnExport) {
        html2canvas($('[id*=dvTable]')[0], {
            onrendered: function (canvas) {
                var base64 = canvas.toDataURL();
                $("[id*=hfImageData]").val(base64);
                __doPostBack(btnExport.name, "");
            }
        });
        return false;
    }
</script>

Code

C#

protected void ExportToImage(object sender, EventArgs e)
{
    string base64 = Request.Form[hfImageData.UniqueID].Split(',')[1];
    byte[] bytes = Convert.FromBase64String(base64);
    Response.Clear();
    Response.ContentType = "image/png";
    Response.AddHeader("Content-Disposition", "attachment; filename=HTML.png");
    Response.Buffer = true;
    Response.Cache.SetCacheability(HttpCacheability.NoCache);
    Response.BinaryWrite(bytes);
    Response.End();
}

VB.Net

Protected Sub ExportToImage(sender As Object, e As EventArgs)
    Dim base64 As String = Request.Form(hfImageData.UniqueID).Split(",")(1)
    Dim bytes As Byte() = Convert.FromBase64String(base64)
    Response.Clear()
    Response.ContentType = "image/png"
    Response.AddHeader("Content-Disposition", "attachment; filename=HTML.png")
    Response.Buffer = True
    Response.Cache.SetCacheability(HttpCacheability.NoCache)
    Response.BinaryWrite(bytes)
    Response.End()
End Sub

Screenshot