Hi Stanu234,
Check this example. Now please take its reference and correct your code.
using the article i have created the example.
Controller
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
[HttpPost]
public FileResult Index(string hfImageData)
{
string base64 = hfImageData.Split(',')[1];
byte[] bytes = Convert.FromBase64String(base64);
return File(bytes, "image/png", "HTML.png");
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/CSS/Stylecss.css" rel="stylesheet" />
<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() {
html2canvas($('[id*=dvTable]')[0], {
onrendered: function (canvas) {
var base64 = canvas.toDataURL();
$("[id*=hfImageData]").val(base64);
$('form').submit();
}
});
}
</script>
</head>
<body>
<form asp-action="Index" asp-controller="Home" method="post">
<div id="dvTable">
<table>
<tr>
<th>Name</th>
<th>Country</th>
<th>Photo</th>
</tr>
<tr>
<td>Mudassar Khan</td>
<td><span style="color:red;">India</span></td>
<td><img id="img" alt="" src="~/Images/Mudassar.png" style="border: 1px solid red; height: 80px; width: 80px;" /></td>
</tr>
</table>
</div>
<br />
<div>
<input type="hidden" ID="hfImageData" name="hfImageData" value="" />
<input type="button" value="Export to Image" onclick="ConvertToImage()" />
</div>
</form>
</body>
</html>
CSS
body {
font-family: Arial;
font-size: 10pt;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
}
table th {
padding: 5px;
background-color: #B8DBFD;
color: #333;
font-weight: bold;
border: 1px solid #ccc;
}
table td {
padding: 5px;
background-color: burlywood;
border: 1px solid #ccc;
}
Screenshot
