How to render a string containing HTML into an image in C#?

Question

I am developing a web application that has an interactive feedback tool for users. In this application users can click a send feedback button. The button puts up an overlay over their current web page and allows them to drag highlight area DIVs to emphasize certain areas. Once they submit their feedback the HTML of the entire page is passed via AJAX back to the server.

Once on the server I now have a string containing the HTML of the page. From here I would like to run this string through some sort of engine that renders the HTML and builds an image. A sort of round about way of taking a screenshot if you will.

How might one accomplish something like this? Are there engines available that are written in C# and can build up the HTML and render an image?

Option 1, see Dillie's answer here: http://stackoverflow.com/questions/334532/render-html-as-an-image — Brian Webster, Jul 19 '11 at 22:06
@DustinDavis Isn't that a web forms control? This is a web application. — CatDadCode, Jul 19 '11 at 22:07
@Alex Ford, what about the css styles for that HTML string? Are you thinking in render the pure HTML? — Tocco, Jul 19 '11 at 22:10
@hamlin11 I'm not sure how that helps me, can you explain? What is this magic code she speaks of? I'm a little confused. — CatDadCode, Jul 19 '11 at 22:11
So I think that you are trying to use a Web browser layout engine/rendering engine ... — Tocco, Jul 19 '11 at 22:18
@Tocco, ideally yes. I'm trying to emulate the functionality of Google Plus' send feedback system. — CatDadCode, Jul 19 '11 at 22:19

Tocco · Answer 1 · 2011-07-20T14:27:59.207

You can consider usin LLMozLib if you want to go by Gecko.
See more details here

EDIT

There's an ActiveX control to embed Gecko on Windows.
Sample here

EDIT

I got it working on a Windows Forms application.
Using these resources.
It is a csharp wrapper to Gecko ...

That's my sample code ...

public partial class Form1 : Form
{
    public Form1()
    {
        Xpcom.Initialize(@"C:\Users\esouza\Downloads\xulrunner"); //Tell where are XUL bin
        InitializeComponent();
        //geckoWebBrowser1 is an instance of GeckoWebBrowser control that I've dragged on the Form1
        geckoWebBrowser1.DocumentCompleted += new EventHandler(geckoWebBrowser1_DocumentCompleted);
    }

    private void button1_Click(object sender, EventArgs e)
    {
        geckoWebBrowser1.Navigate("http://www.google.com");
    }

    void geckoWebBrowser1_DocumentCompleted(object sender, EventArgs e)
    {
        Bitmap b = new Bitmap(geckoWebBrowser1.Width, geckoWebBrowser1.Height);
        geckoWebBrowser1.DrawToBitmap(b, new Rectangle { X = 0, Y = 0, Width = 800, Height = 600 });
        b.Save("file.bmp");
    }
}

score 2 · Accepted Answer · answered Jul 20 '11 at 14:34

2

Check out this framework - http://awesomium.com/

This is exactly what you need.

Set the base URL, this will be needed to resolve any relative URLs

WebCore.SetBaseDirectory("C:\\MyApplication\\MyBaseDirectory");

Then load the HTML -

myWebView.LoadHTML("<p>Hello World!</p>");

Then use the .Render() method, and you'll be able to save the rendered content to an image.

answered Jul 20 '11 at 14:34

Maxim

7,268
1
32
44

D: except not for $2900!!! Dang... Sadly our company makes a lot more than $100k but I know they will not spring for $2900 because what I want it for is relatively simplistic. – CatDadCode Jul 20 '11 at 14:56
It looks like if I want to go the cheap route I'm going to have to stick to the way Google+ does it and use the `canvas` tag in HTML 5 to draw a screenshot. Then just limit the functionality in HTML 4 browsers. – CatDadCode Jul 20 '11 at 14:59

score 0 · Answer 3 · edited May 23 '17 at 12:26

0

Very interesting question and I've not got a silver bullet for you.

You're surely going to need a browser engine of some description and then capture the rendered output as a bitmap.

I see from this question that there was a COM wrapper developed for WebKit. Maybe that's a good starting point.

edited May 23 '17 at 12:26

Community

1
1

answered Jul 19 '11 at 22:21

Steve Morgan

12,978
2
40
49

How to render a string containing HTML into an image in C#?

3 Answers3

Linked