Convert HTML To Image In C#

Convert HTML to Image in C#

Learn how to convert HTML to image in C# using system.Drawing library.

Step 1 - Create a Project

After opening Visual Studio, we need to create an ASP.NET MVC project. For doing that, just click File - New - Project.

After choosing a project, a new dialog will pop up. In that, select Console Application and give your project the location and a name. Then, click the "Ok" button.

Then after the Program.cs class will open and you will see the below blank main class.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace MergePDF
{
class Program
{
static void Main(string[] args)
{
}
}
}

Step 2 - Install two Nuget Package

HtmlRenderer.WinForms
System.Drawing.Common

Right click on References in Solution explorer and select "Manage Nugget Package". On selecting it, the popup window will open like below.

Add the below namespace.

using System;
using System.Drawing;
using System.Windows.Forms;
using System.Threading;

Then copy the below code and paste into your program.cs file.

namespace HtmlToImage
{
class Program
{
static void Main(string[] args)
{
var source = @"
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Kaushik</td>
<td>India</td>
</tr>
<tr>
<td>Bhavdip</td>
<td>America</td>
</tr>
<tr>
<td>Faisal</td>
<td>Australia</td>
</tr>
</table>
</body>
</html> ";
StartBrowser(source);
Console.ReadLine();
}
private static void StartBrowser(string source)
{
var th = new Thread(() =>
{
var webBrowser = new WebBrowser();
webBrowser.ScrollBarsEnabled = false;
webBrowser.IsWebBrowserContextMenuEnabled = true;
webBrowser.AllowNavigation = true;
webBrowser.DocumentCompleted += webBrowser_DocumentCompleted;
webBrowser.DocumentText = source;
Application.Run();
});
th.SetApartmentState(ApartmentState.STA);
th.Start();
}
static void webBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
var webBrowser = (WebBrowser)sender;
using (Bitmap bitmap =
new Bitmap(
webBrowser.Width,
webBrowser.Height))
{
webBrowser
.DrawToBitmap(
bitmap,
new System.Drawing
.Rectangle(0, 0, bitmap.Width, bitmap.Height));
bitmap.Save(@"filename.jpg",
System.Drawing.Imaging.ImageFormat.Jpeg);
}
}
}
}

In the above coding,

First of all set your html to "source" variable.

Then after the program call the "StartBrowser()" function. This function renders the html which you provided to the source into the browser using WebBrowser Control.

var webBrowser = new WebBrowser();
webBrowser.ScrollBarsEnabled = false;
webBrowser.IsWebBrowserContextMenuEnabled = true;
webBrowser.AllowNavigation = true;

Above all is the property of WebBrowser. You can change it as per your requirements.

"StartBrowser()" function calls the "webBrowser_DocumentCompleted()" function, in this function you can provide the height and width of image.And also provide the image path.

In the above code I give the file name directly with the image displayed as a bin -> debug -> filename.jpg.

Output

3 Comments

Join the conversation! Your thoughts help the community grow.

Cenk Günay5y ago
Also need to abort thread at the end of DocumentCompleted event
Cenk Günay5y ago
To get proper size add webBrowser.Size = webBrowser.Document.Body.ScrollRectangle.Size in DocumentCompleted event
Santanu Bhattacharjee5y ago
It's not working in dot net core please help me to resolve this issue. its showing the type of namespace web browser is not found.