In this article I will explain how to convert (Export) HTML DIV or Table to Image using HTML Canvas in ASP.Net using C# and VB.Net.
The Html2Canvas JavaScript library allows to capture screenshots and convert HTML to Image using HTML5 Canvas.
HTML5 Canvas has a function named toDataURL which allows to convert its contents to Image.
HTML Markup
The HTML Markup consists of an HTML DIV with an HTML Table, a Button with UseSubmitBehavior property set to false and a Hidden Field to send the generated Base64 string to server.
The UseSubmitBehavior property is set to false in order to call the click event handler using JavaScript.
<div id="dvTable" style = "width:340px;background-color:White;padding:5px">
<u>Customer Records</u>
<br />
<br />
<table cellspacing="0" rules="all" border="1" 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)" />
Capturing Screenshot of HTML DIV using Html2Canvas and HTML5
When the Export button is clicked, the JavaScript ConvertToImage function is executed which captures a screenshot of HTML DIV using Html2Canvas library and then saves the Base64 string into the Hidden Field.
Finally the Server Side event of the Button is triggered using the ASP.Net __doPostBack method.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
function ConvertToImage(btnExport) {
html2canvas($("#dvTable")[0]).then(function (canvas) {
var base64 = canvas.toDataURL();
$("[id*=hfImageData]").val(base64);
__doPostBack(btnExport.name, "");
});
return false;
}
</script>
Handing the Base64 string and exporting it as Image file
Inside the click event handler of the Button, the Base64 string is fetched from the Hidden Field and it is converted to an Array of Bytes.
Finally the array of bytes are written to the Response and downloaded as Image file.
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
![Convert (Export) HTML DIV or Table to Image using HTML Canvas in ASP.Net using C# and VB.Net]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
