C# Tutorial: Convert HTML String to Image | Code2Night
Code2night
  • Home
  • Blogs
  • Guest Posts
  • Tutorial
  • Post Blog
  • Register
  • Login
  1. Home
  2. Blogpost

Convert HTML String To Image In C#

Date- Jul 02,2022

8978

Free Download Pay & Download
HTMLtoImage C#

Hello, guys, and welcome to Code2Night! In this article, we will see how to Convert HTML String To Image In C#

Have you ever found yourself working on an ASP.NET web project and encountered the need to convert your HTML output into an image? Perhaps you wanted to save the rendered HTML as an image file on your system. If so, you're in the right place! In this introductory guide, we will explore how to convert an HTML string to an image using C# in ASP.NET.

Converting HTML to an image can be quite beneficial in a variety of situations. It allows you to capture the visual representation of your web page or HTML content and save it as an image file, which is useful for making reports, thumbnails, and sharing visual representations of your HTML output.

In the context of ASP.NET, C# provides a powerful set of tools and libraries that enable us to accomplish this task efficiently. By leveraging the capabilities of these tools, we can transform HTML code into image files effortlessly.

Throughout this tutorial, we will walk you through the process step by step. We will start by exploring the different approaches available for converting HTML to an image in C# and then delve into a specific method using ASP.NET. By the end of this tutorial, you'll have a solid understanding of how to convert an HTML string to an image in your ASP.NET web project using C#.

So, let's dive right in and unlock the secrets of converting HTML to an image in C# ASP.NET!


So, in order to export your HTML to an image, we can utilize the WebBrowser class, which is available in ASP.NET MVC. To begin, let's create the HTML that we wish to export as an image. You can copy the method from the code provided below. Additionally, please make sure to include all necessary dependencies and libraries for this process.

using System;  
using System.Drawing;  
using System.Windows.Forms;  
using System.Threading;   
 public void CreateHtmlToImage()
        {
            var source = @"<!DOCTYPE html>
                                            <html>
                                            <head><meta http-equiv='X-UA-Compatible' content='IE=Edge' />
                                            <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 style='width:1000px'>

                                            <h2>HTML Table</h2>

                                                <table style='width:1000px'>
                                                  <tr>
                                                    <th>Company</th>
                                                    <th>Contact</th>
                                                  </tr>
                                                  <tr>
                                                    <td>Alfreds Futterkiste</td>
                                                    <td>Maria Anders</td>
                                                  </tr>
                                                  <tr>
                                                    <td>Centro comercial Moctezuma</td>
                                                    <td>Francisco Chang</td>
                                                  </tr>
                                                  <tr>
                                                    <td>Ernst Handel</td>
                                                    <td>Roland Mendel</td>
                                                  </tr>
                                                  <tr>
                                                    <td>Island Trading</td>
                                                    <td>Helen Bennett</td>
                                                  </tr>
                                                  <tr>
                                                    <td>Laughing Bacchus Winecellars</td>
                                                    <td>Yoshi Tannamuri</td>
                                                  </tr>
                                                  <tr>
                                                    <td>Magazzini Alimentari Riuniti</td>
                                                    <td>Giovanni Rovelli</td>
                                                  </tr>
                                                </table>

                                            </body>
                                            </html>";
            var filename = @"F://Image.jpg";
            var th = new Thread(() =>
            {
                var webBrowser = new WebBrowser();
                webBrowser.ScrollBarsEnabled = false;
                webBrowser.IsWebBrowserContextMenuEnabled = true;
                webBrowser.AllowNavigation = true;

                webBrowser.DocumentCompleted += webBrowserDocumentCompleted;
                webBrowser.DocumentText = source;
                webBrowser.Name = filename;
                webBrowser.Width = 1000;
                Application.Run();
            });
            th.SetApartmentState(ApartmentState.STA);
            th.Start();

            Task.Run(() => th);
            Task.WaitAll();
        }

So, after you use this on your controller, you have to add this Completed event, which will be fired once your HTML output is ready to be saved as an image. It will save the bitmap image to the location specified by the filename parameter. Now, execute the code, and you will see that your HTML is saved as an image in the specified location. This functionality ensures that you can easily convert your HTML content into visual representations, allowing for convenient sharing or further manipulation if needed. By incorporating this feature into your controller, you enhance the versatility and usability of your application. Feel free to explore the various possibilities and creative applications enabled by this capability.

static void webBrowserDocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
        {
            var webBrowser = (WebBrowser)sender;
            int scrollWidth = webBrowser.Document.Body.ScrollRectangle.Width;
            int scrollHeight = webBrowser.Document.Body.ScrollRectangle.Height;
            using (Bitmap bitmap = new Bitmap(scrollWidth, scrollHeight))
            {
                webBrowser.DrawToBitmap(bitmap, new System.Drawing.Rectangle(0, 0, bitmap.Width, bitmap.Height));
                bitmap.Save(webBrowser.Name, System.Drawing.Imaging.ImageFormat.Jpeg);
            }
        }

Convert HTML

This is the image output that we got in our case. So this is how you can convert html string to the image in c# asp.net.

Comments

Tags

LinkedinLogin
LinkedinProfile
GetLinkedinProfile
C#
Aspnet
MVC
Linkedin
ITextSharp
Export to Pdf
AspNet Core
AspNet
View to Pdf in Aspnet
Model Validation In ASPNET Core MVC 60
Model Validation
Model Validation In ASPNET Core MVC
Model Validation In ASPNET
Image Compression in AspNet
Compress Image in c#
AspNet MVC
Free Download for Youtube Subscribers!

First click on Subscribe Now and then subscribe the channel and come back here.
Then Click on "Verify and Download" button for download link

Subscribe Now | 1190
Download
Support Us....!

Please Subscribe to support us

Thank you for Downloading....!

Please Subscribe to support us

Continue with Downloading
Be a Member
Join Us On Whatsapp Join Us On Facebook

Welcome To Code2night, A common place for sharing your programming knowledge,Blogs and Videos

  • Panipat
  • info@Code2night.com

Links

  • Home
  • Blogs
  • Tutorial
  • Post Blog

Popular Tags

Copyright © 2025 by Code2night. All Rights Reserved

  • Home
  • Blog
  • Login
  • SignUp
  • Contact
  • Terms & Conditions
  • Refund Policy
  • About Us
  • Privacy Policy
  • Json Beautifier
  • Guest Posts