Generate image from HTML markup

HTML Renderer can be used to generate image (pmg, jpeg, bmp, etc.) from HTML markup snippet.
Because of GDI text rendering issues with alpha channel and clear type text rendering, rendering to image requires special handling that this page is dedicated to.
For technical details on the issues see GDI vs. GDI+ text rendering.

When approaching image generation the most critical question is the generated image background, must the background have transparency (full or partial) or can it be completely filled by non-transparent color, be it solid color (like web-browsers white), gradient or existing image to render the HTML on it. Therefor the page presents image rendering via 3 options: solid color, image and transparent background.

The second criteria is the generated image size: is it required to be of specific size, restricted by minimum and maximum values or free to be as large as the HTML requires. In all cases, HTML layout is executed to find the rendered html desired size and to layout the HTML in the given restrictions. Therefor each background rendering options has overloads to handle the different size restrictions.

Note: If the rendered HTML define its own background, either by color or image, it will hide the background defined by the rendering method. Though you can always use opacity or margins so the defined background will be visible nevertheless therefor this scenario is not covered for simplicity.

1. Generate image with solid color background
   • No size restrictions
   • Fixed size image
   • Min/Max size restrictions
2. Generate image with image background
3. Generate image with transparent background
   • Default TextRenderingHint - SingleBitPerPixelGridFit
   • AntiAlias TextRenderingHint
4. HTML used in examples
5. GDI vs. GDI+ text rendering
6. Image loading optimization

1. Solid color background

• Render HTML with solid background color.
• Using GDI text rendering.
• Excellent performance.
• Sharp and excellent aligned text.
• Using "HtmlRender.RenderToImage" methods.
• See the HTML used in examples.

No size restrictions

Image image = HtmlRender.RenderToImage(html);

• Generated image size depends on HTML content greedy layout.
  • Width will be set by the longest line without wrapping.
  • Height will be set by exact height of the HTML.
• The default background color is used - white.

Fixed size image

Image image = HtmlRender.RenderToImage(html, new Size(400, 200), Color.Linen);

• Generate image of fixed size - 400x200 pixels.
• HTML layout is restricted by max width - 400 pixels.
  • Text is wrapped to to fir into the restricted width.
• Image heights extend beyond the actual height of the HTML.
  • If image height was smaller than actual HTML height the rendered HTML would be clipped.
• Use Color.Linen solid background color.

Min/Max size restrictions

Image image = HtmlRender.RenderToImage(html, new Size(650, 50), new Size(1400, 106), Color.SeaShell);

• Generate image with minimum and maximum size restrictions.
• Restricted max width is above the max required width to layout the longest text without wrapping so it has no effect.
• Restricted min width is also above the required layout width (541px) therefore the html is extended.
• the resulting image width is 650px and the html uses the full width to layout.
• Restricted max height is lower than the required height to fully render the html therefore it is clipped at the restricted height value: 106px.

---

2. Image background

• Using GDI text rendering.
• Excellent performance.
• Sharp and excellent aligned text.
• See the HTML used in examples.

---

3. Transparent background

• Render HTML with transparent background.
• Using GDI+ text rendering.
• TextRenderingHint can be controlled, default: AntiAlias.
• Better used for high DPI devices like print.
• Less sharp and may have letter-symbols alignments small issues (font dependent).
• Slower than GDI (80%-150% slower, see The wonders of text rendering and GDI).
• Using "HtmlRender.RenderToImageGdiPlus" methods.
• See the HTML used in examples.

AntiAlias (default) TextRenderingHint

Image image = HtmlRender.RenderToImageGdiPlus(html, 460);

• The image background is fully transparent.
• Rendered text is blurred a little by Anti-Aliasing (compared to GDI text rendering).

SingleBitPerPixelGridFit TextRenderingHint

Image image = HtmlRender.RenderToImageGdiPlus(html, 460, 0, TextRenderingHint.SingleBitPerPixelGridFit);

• The image background is fully transparent.
• Rendered text is not as smooth as GDI or AntiAlias text rendering.
• Used SingleBitPerPixelGridFit TextRenderingHint

---

4. HTML used in examples

<body style="font: 10pt Tahoma">
    <h3 style="color: navy; margin-bottom: 8px">Render to Image</h3>
    <hr />
    <table style="border: 1px solid maroon; margin-top: 5px">
        <tr style="vertical-align: top;">
            <td width="32" style="padding: 2px 0 0 0">
                <img src="http://download-codeplex.sec.s-msft.com/Download?ProjectName=HtmlRenderer&DownloadId=770243" />
            </td>
            <td>This <i>text</i> is inside a <b>table</b> <u>element</u>.<br />
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit.
            </td>
        </tr>
    </table>
    <ul style="margin-top: 5px">
        <li><span style="color: red">Colors</span></li>
        <li><span style="background-color: #8dd">Back colors</span></li>
    </ul>
</body>

Expected result (as rendered in Google Chrome):

5. GDI vs. GDI+ text rendering

I have written a "little" on this issue:

• The wonders of text rendering and GDI.
• Transparent text rendering with GDI.
• GDI text rendering to image
• Also see what is ClearType on Wikipedia.

I strongly recommend to read the links above.
Nevertheless I will provide a brief explanation here:
...

6. Image loading optimization