How can I convert html code to image in c# web applications

Question

4.00/5 (1 vote)

See more:

Dear Friends,

How can i convert my html code to image(bmp or jpg) in c# web applications.

here i am converting my grid view as html code using html render.

sample code:

C#

DataTable dt = new DataTable("RunnerUp");
            DataColumn dc1 = new DataColumn("Name", typeof(string));
            DataColumn dc2 = new DataColumn("Points", typeof(int));
            dt.Columns.Add(dc1);
            dt.Columns.Add(dc2);
            DataRow dr1 = dt.NewRow();
            dr1[0] = "Vulpes";
            dr1[1] = 235;
            DataRow dr2 = dt.NewRow();
            dr2[0] = "SP Nayak";
            dr2[1] = 135;
            DataRow dr3 = dt.NewRow();
            dr3[0] = "Krishna";
            dr3[1] = 40;
            dt.Rows.Add(dr1);
            dt.Rows.Add(dr2);
            dt.Rows.Add(dr3);
            GridView1.DataSource = dt;
            GridView1.DataBind();


            StringWriter stringWrite = new System.IO.StringWriter();
            HtmlTextWriter htmlWrite = new HtmlTextWriter(stringWrite);
            string content;

           
            GridView1.RenderControl(htmlWrite);
            

            content = stringWrite.ToString();
            
            Bitmap m_Bitmap = new Bitmap(800, 400);

            PointF point = new PointF(0, 0);

            SizeF maxSize = new System.Drawing.SizeF(800, 800);

            CssData css = null;
            HtmlRender.Render(Graphics.FromImage(m_Bitmap), "<html><head></head><body>" + content + "</body></html>", point, maxSize, css);

            m_Bitmap.Save(@"D:\Thumbnail1.bmp");

here i am not getting colors,styles and width of the grid view headers
Kindly Provide me the solution.

Posted 3-Oct-13 21:53pm

D-Kishore

Updated 6-Oct-13 17:57pm

v5

Add a Solution

Comments

Prasad Khandekar 4-Oct-13 6:17am

Hello Kishore,

The reason you are not getting colors, styles and widths is because if you look at the generated HTML that you are pasing to the HTML Rendered does not contain that information. I suggest you also add the styelsheet rules in the generated html, make sure all images are referenced via relative paths and that the path does exists under your applications root folder.

Please also have a look at https://github.com/ArthurHub/HTML-Renderer/blob/master/Source/Demo/DemoForm.cs.

Regards,

Regards,

D-Kishore 4-Oct-13 7:30am

Yes Prasad, i understood what you are saying.
in the above code we are using CssData as null, How can I pass css styles here.
I am not getting any idea how to provide css styles here.

If possible can give me any example

6 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

pankaj mishra 1234 · Answer 1 · 2013-10-07T01:37:00

Solution 4

take a look at
http://html2canvas.hertzen.com/examples.html[^]
this convert html into canvas and then convert canvas to base 64 image using
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

Posted 7-Oct-13 1:37am

pankaj mishra 1234

pankaj mishra 1234 · Answer 2 · 2013-10-07T20:07:00

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="gridtoImage.aspx.cs" Inherits="examples_gridtoImage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .gridview
    {
        border:1px solid black;
        width:100%;
    }


    .gridview tr th
    {
       background:#1b9f7a;
       color:#fff;
       height:25px;
       font-weight:bold;
    }

    .gridview tr,
    .gridview tr td,
    .gridview tr th
    {
        padding:2px;

    }

  .gridview tr:nth-child(even)
  {
      background:#CCC;
      color:#333;
      }

  .gridview tr:nth-child(odd)
  {
      background:#FFF;
       color:#333;
  }


  .gridview tr:nth-child(even):hover
  {
      background:#999;
       color:#333;
  }

  .gridview tr:nth-child(odd):hover
  {
      background:#333;
       color:#fff;
  }
    </style>
    <script type="text/javascript" src="../build/html2canvas.js"></script>
    <script type="text/javascript">
        function CONVERT() {
            html2canvas(document.getElementById('gv'), {
                onrendered: function (canvas) {
                    // document.body.appendChild(canvas);
                    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                    im.src = image;
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="gv">
        <asp:GridView ID="GridView1" runat="server" CssClass="gridview">
        </asp:GridView>
    </div>
    <br />
    <input type="button" value="save as image" onclick="CONVERT()"/>
    <img id="im" />
    </form>
</body>
</html>

pankaj mishra 1234 · Answer 3 · 2013-10-03T22:53:00

//aspx page

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="convertHTMLTOImage.aspx.cs" Inherits="convertHTMLTOImage" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtWebsiteAddress" runat="server" Text="www.google.com" />
        <asp:Button ID="btnCreateThumbnailImage" runat="server" Text="Create Thumbnail Image" OnClick="CreateThumbnailImage" /></td>
        <asp:TextBox ID="txtWidth" runat="server" Text="200" />
        <asp:TextBox ID="txtHeight" runat="server" Text="200" />
        <asp:Image ID="imgThumbnailImage" runat="server" Visible="false" />
    </div>
    </form>
</body>
</html>

//code behind

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Drawing;
using System.Threading;
using System.Windows.Forms;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class convertHTMLTOImage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
   
   protected void CreateThumbnailImage(object sender, EventArgs e)
        {
            string url = string.Format("http://{0}", txtWebsiteAddress.Text);
            int width = Int32.Parse(txtWidth.Text);
            int height = Int32.Parse(txtHeight.Text);
            Thumbnail thumbnail = new Thumbnail(url, 800, 600, width, height);
            Bitmap image = thumbnail.GenerateThumbnail();
            image.Save(Server.MapPath("~") + "/Thumbnail.bmp");
            imgThumbnailImage.ImageUrl = "~/Thumbnail.bmp";
            imgThumbnailImage.Visible = true;
        }     
   
}
public class Thumbnail
{
    public string Url { get; set; }
    public Bitmap ThumbnailImage { get; set; }
    public int Width { get; set; }
    public int Height { get; set; }
    public int BrowserWidth { get; set; }
    public int BrowserHeight { get; set; }

    public Thumbnail(string Url, int BrowserWidth, int BrowserHeight, int ThumbnailWidth, int ThumbnailHeight)
    {
        this.Url = Url;
        this.BrowserWidth = BrowserWidth;
        this.BrowserHeight = BrowserHeight;
        this.Height = ThumbnailHeight;
        this.Width = ThumbnailWidth;
    }
    public Bitmap GenerateThumbnail()
    {
        Thread thread = new Thread(new ThreadStart(GenerateThumbnailInteral));
        thread.SetApartmentState(ApartmentState.STA);
        thread.Start();
        thread.Join();
        return ThumbnailImage;
    }
    private void GenerateThumbnailInteral()
    {
        WebBrowser webBrowser = new WebBrowser();
        webBrowser.ScrollBarsEnabled = false;
        webBrowser.Navigate(this.Url);
        webBrowser.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(WebBrowser_DocumentCompleted);
        while (webBrowser.ReadyState != WebBrowserReadyState.Complete) Application.DoEvents();
        webBrowser.Dispose();
    }
    private void WebBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
    {
        WebBrowser webBrowser = (WebBrowser)sender;
        webBrowser.ClientSize = new Size(this.BrowserWidth, this.BrowserHeight);
        webBrowser.ScrollBarsEnabled = false;
        this.ThumbnailImage = new Bitmap(webBrowser.Bounds.Width, webBrowser.Bounds.Height);
        webBrowser.BringToFront();
        webBrowser.DrawToBitmap(ThumbnailImage, webBrowser.Bounds);
        this.ThumbnailImage = (Bitmap)ThumbnailImage.GetThumbnailImage(Width, Height, null, IntPtr.Zero);
    }
}

pankaj mishra 1234 · Answer 4 · 2013-10-04T01:45:00

Solution 2

check following link
http://www.c-sharpcorner.com/UploadFile/scottlysle/DGV2BMP01182007020129AM/DGV2BMP.aspx[^]

Posted 4-Oct-13 1:45am

pankaj mishra 1234

Comments

D-Kishore 6-Oct-13 23:20pm

Hi pankaj, this is for win forms.
But here I am working with web forms.

Zafar A khan · Answer 5 · 2013-10-06T18:21:00

why you want to convert it image. i think the best way is to just export the grid to excel with css.

C#

string css=@"<style>
.header{background-color:black;color:white;}
.row{background-color:#cccccc;color:black;}
.altrow{backround-color:#ffffff;color:black;}
</style>";
Response.Clear();
        Response.Buffer = true;
        Response.ContentType = "application/ms-excel";
        Response.AddHeader("content-disposition", "attachment;filename=MyFiles.xls");
        Response.Charset = "";
        this.EnableViewState = false;
        System.IO.StringWriter sw = new System.IO.StringWriter();
        System.Web.UI.HtmlTextWriter htw = new System.Web.UI.HtmlTextWriter(sw);
       
        GridView1.RenderControl(htw);
Repponse.Write(css);
 Response.Write(sw.ToString());
        Response.End();

Farhomar · Answer 6 · 2014-05-13T04:23:00

Solution 7

I found this perfect and simple solution for this on google.
http://www.converthtmltoimage.com/Convert-html-to-image-in-asp.net.html

Posted 13-May-14 4:23am

Farhomar