In this article I will explain with an example, how to convert (Export) HTML DIV or Table to Image using HTML Canvas in ASP.Net.
The
Html2Canvas JavaScript library allows to capture screenshots and convert HTML to Image using HTML5 Canvas.
html2canvas plugin
Please refer the following link for documentation for the
jQuery html2canvas plugin.
HTML Markup
The HTML Markup consists of following elements:
DIV – For displaying data.
Button – For exporting data to Image.
<div id="dvTable" style="width: 340px; padding: 5px">
<u>Customer Records</u>
<br />
<br />
<table cellspacing="0" rules="all" border="1" style="border-collapse: collapse;">
<tr>
<th>Customer Id</th>
<th>Name</th>
<th>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 />
<input id="btnExport" type="button" value="Export to Image" />
Exporting HTML DIV to Image using HTML5 Canvas
Inside the
jQuery document ready event handler, the INPUT Button has been assigned with a
click event handler.
Inside this function, the html2canvas method accepts reference of the HTML DIV and then using toDataURL method of canvas object of html2canvas library the BASE64 string is determined.
Then, an Anchor element is created and its href property is set with the BASE64 string determined earlier and target and download properties are also set.
Finally, the click function is called which initiates the file download operation.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnExport").click(function () {
html2canvas($("#dvTable")[0]).then(function (canvas) {
var base64 = canvas.toDataURL();
var lnkDownload = document.createElement('a');
document.body.appendChild(lnkDownload);
lnkDownload.href = base64;
lnkDownload.target = "_self";
lnkDownload.download = "DIV.png";
lnkDownload.click();
document.body.removeChild(lnkDownload);
});
});
});
</script>
Screenshot
![Convert (Export) HTML DIV or Table to Image using HTML Canvas in ASP.Net]()
Exported Image
![Convert (Export) HTML DIV or Table to Image using HTML Canvas in ASP.Net]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
