JavaScript :
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function PrintDiv() {
html2canvas($('#image'), {
onrendered: function (canvas) {
var img = canvas.toDataURL()
window.open(img);
}
});
}
</script>
put the above code in the head section of the webpage
Asp.net :
<head runat="server">
<title>Save Div As image in asp.net</title>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function PrintDiv() {
html2canvas($('#image'), {
onrendered: function (canvas) {
var img = canvas.toDataURL()
window.open(img);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
Convert div into image
<div id="image" style="width: 500px;">
<table border="1" width="500" bgcolor="pink">
<tr>
<td>
Asp.Net
</td>
<td>
Asp.Net
</td>
<td>
Asp.Net
</td>
</tr>
<tr>
<td>
Asp.Net
</td>
<td>
Asp.Net
</td>
<td>
Asp.Net
</td>
</tr>
<tr>
<td>
Asp.Net
</td>
<td>
Asp.Net
</td>
<td>
Asp.Net
</td>
</tr>
<tr>
<td>
Asp.Net
</td>
<td>
Asp.Net
</td>
<td>
Asp.Net
</td>
</tr>
<tr>
<td>
Asp.Net
</td>
<td>
Asp.Net
</td>
<td>
Asp.Net
</td>
</tr>
</table>
</div>
<br />
<asp:Button ID="btnSave" runat="server" Text="Save As Image" OnClientClick="return PrintDiv();" />
</form>
</body>
</html>