Post
Ask Question

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.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6.   
  7. namespace MergePDF  
  8. {  
  9.     class Program  
  10.     {  
  11.         static void Main(string[] args)  
  12.         {  
  13.   
  14.         }  
  15.     }  
  16. }  
Step 2 - Install two Nuget Package
  1. HtmlRenderer.WinForms
  2. 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.
  1. using System;  
  2. using System.Drawing;  
  3. using System.Windows.Forms;  
  4. using System.Threading;   
Then copy the below code and paste into your program.cs file.
  1. namespace HtmlToImage  
  2. {  
  3.     class Program  
  4.     {  
  5.         static void Main(string[] args)  
  6.         {  
  7.             var source = @"  
  8.                 <!DOCTYPE html>  
  9.                     <html>  
  10.                         <head>  
  11.                             <style>  
  12.                                 table {  
  13.                                   font-family: arial, sans-serif;  
  14.                                   border-collapse: collapse;  
  15.                                   width: 100%;  
  16.                                 }  
  17.                                   
  18.                                 td, th {  
  19.                                   border: 1px solid #dddddd;  
  20.                                   text-align: left;  
  21.                                   padding: 8px;  
  22.                                 }  
  23.                                   
  24.                                 tr:nth-child(even) {  
  25.                                   background-color: #dddddd;  
  26.                                 }  
  27.                           </style>  
  28.                          </head>  
  29.                     <body>  
  30.                       
  31.                         <h2>HTML Table</h2>  
  32.                           
  33.                         <table>  
  34.                           <tr>  
  35.                             <th>Contact</th>  
  36.                             <th>Country</th>  
  37.                           </tr>  
  38.                           <tr>  
  39.                             <td>Kaushik</td>  
  40.                             <td>India</td>  
  41.                           </tr>  
  42.                           <tr>  
  43.                             <td>Bhavdip</td>  
  44.                             <td>America</td>  
  45.                           </tr>  
  46.                           <tr>  
  47.                             <td>Faisal</td>  
  48.                             <td>Australia</td>  
  49.                           </tr>  
  50.                         </table>  
  51.                      </body>  
  52.                     </html> ";  
  53.             StartBrowser(source);  
  54.             Console.ReadLine();  
  55.         }  
  56.         private static void StartBrowser(string source)  
  57.         {  
  58.             var th = new Thread(() =>  
  59.             {  
  60.                 var webBrowser = new WebBrowser();  
  61.                 webBrowser.ScrollBarsEnabled = false;  
  62.                 webBrowser.IsWebBrowserContextMenuEnabled = true;  
  63.                 webBrowser.AllowNavigation = true;  
  64.                   
  65.                 webBrowser.DocumentCompleted += webBrowser_DocumentCompleted;  
  66.                 webBrowser.DocumentText = source;  
  67.                   
  68.                 Application.Run();  
  69.             });  
  70.             th.SetApartmentState(ApartmentState.STA);  
  71.             th.Start();  
  72.         }  
  73.         static void webBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)  
  74.         {  
  75.             var webBrowser = (WebBrowser)sender;  
  76.             using (Bitmap bitmap =  
  77.                 new Bitmap(  
  78.                     webBrowser.Width,  
  79.                     webBrowser.Height))  
  80.             {  
  81.                 webBrowser  
  82.                     .DrawToBitmap(  
  83.                     bitmap,  
  84.                     new System.Drawing  
  85.                         .Rectangle(0, 0, bitmap.Width, bitmap.Height));  
  86.                 bitmap.Save(@"filename.jpg",  
  87.                     System.Drawing.Imaging.ImageFormat.Jpeg);  
  88.             }  
  89.   
  90.         }  
  91.     }  
  92. }  
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.
  1. var webBrowser = new WebBrowser();  
  2. webBrowser.ScrollBarsEnabled = false;  
  3. webBrowser.IsWebBrowserContextMenuEnabled = true;  
  4. 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
 


Similar Articles