Render HTML as an Image

Question

I'm generating a coupon based on dynamic input and a cropped image, and I'm displaying the coupon using ntml and css right now, the problem is, printing this has become an issue because of how backgrounds disappear when printing and other problems, so I think the best solution would be to be able to generate an image based on the html, or set up some kind of template that takes in strings and an image, and generates an image using the image fed in as a background and puts the coupon information on top.

Is there anything that does this already?

This is for an ASP.NET 3.5 C# website!

Thanks in advance.

edit: It'd be great if the output could be based on the HTML input, as the coupon is designed by manipulating the DOM using jQuery and dragging stuff around, it all works fine, it's just when it comes to the printing (to paper) it has z-indexing issues.

Answer 1

There is a very powerful image creation library called GD which I often use with PHP.

I am led to believe there is a wrapper for this library that ASP programmers can use. Try this

Answer 2

Unless the "other problems" are pretty severe, couldn't you just instruct your users to turn on Background Images when printing?

In any case, I'd default to serving a PDF rather than an image, doubly so since it is intended for print.

Answer 3

Try PDFSharp...it's not exactly a "take this HTML and make a PDF" but with a small amout of fiddling you can easily make a PDF out of the info you are using to make the HTML.

Answer 4

What you can do is create an aspx page that changes the response type to be in the format you want and then put the image into the stream. I created a barcode generator that does a similar thing. Excluding all the formalities of generating the image, you'll Page_Load will look something like this:

Bitmap FinalBitmap = new Bitmap();
MemoryStream msStream = new MemoryStream();

strInputParameter == Request.Params("MagicParm").ToString()

// Magic code goes here to generate your bitmap image.
FinalBitmap.Save(msStream, ImageFormat.Png);

Response.Clear();
Response.ContentType = "image/png";

msStream.WriteTo(Response.OutputStream);

if ((FinalBitmap != null)) FinalBitmap.Dispose();

and that's it! Then all you have to do in your image is set the URL to be something like RenderImage.aspx?MagicParm=WooHoo or whatever you need. That way you can have it render whatever you want to specify.

Answer 5

You can render html to a bitmap using the WebBrowser control in either a winforms or console application.

An example of this can be found here: http://www.wincustomize.com/articles.aspx?aid=136426&c=1

The above example can be modified to run in ASP.Net by creating a new STAThread and performing an Application.Run on it to start a new message loop.

Answer 6

PHP/Ruby Alternative

If you have accessed this question and are actually looking for soething that will work without Windows, you can try the KHTML library: http://wiki.goatpr0n.de/projects/khtmld

The website has a ridiculous name I admit, but I can assure you it is genuine. Other related pages are: the sourceforge page http://khtml2png.sourceforge.net/

Answer 7

Just set up your css properly, so that you have a css file targeted at the print medium. It is pretty easy to guarantee that the coupon will always be legible, without worrying about whether they have bg images on or not. Needlesly moving to an image doesn't make any sense, unless there is some reason you don't want it to be machine readable.

Answer 8

I haven't tried to myself, but you should be able to render HTML into an image by using the WebBrowser control and the DrawToBitmap() method inherited from the base Control class.

UPDATE: I tried this myself and there are some caveats. The WebBrowser control doesn't seem to render the web page until the control is show, so the WebBrowser needs to be in a Form and the Form must be shown for the HTML to be rendered and the DocumentCompleted event to be raised.