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: stackoverflow.com/questions/334532/render-html-as-an-image — Brian Webster
– Brian Webster, Commented Jul 19, 2011 at 22:06
@DustinDavis Isn't that a web forms control? This is a web application. — ChevCast
– ChevCast, Commented Jul 19, 2011 at 22:07
@Alex Ford, what about the css styles for that HTML string? Are you thinking in render the pure HTML? — Tocco
– Tocco, Commented Jul 19, 2011 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. — ChevCast
– ChevCast, Commented Jul 19, 2011 at 22:11

Maxim · Accepted Answer · 2011-07-20 14:34:41Z

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, 2011 at 14:34

Maxim

7,3681 gold badge34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ChevCast Over a year ago

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.

ChevCast Over a year ago

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.

Tocco · Accepted Answer · 2011-07-20 14:27:59Z

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");
    }
}

Community · Accepted Answer · 2017-05-23 12:26:51Z

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, 2017 at 12:26

CommunityBot

11 silver badge

answered Jul 19, 2011 at 22:21

Steve Morgan

13.1k2 gold badges44 silver badges49 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related