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 whatever the generated image need to be transparent or can it be filled by background, be it a solid color (like web-browsers white) or existing image to render the HTML on it.
The second criteria in image generation 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, controlled by different method overloads provided. In all cases HTML layout is executed to find the rendered html desired size and layout the HTML in the given 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.
- Generate image with solid color background
- Generate image with image background
- Generate image with transparent background
- GDI vs. GDI+ text rendering
- Image loading optimization
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):
Solid color background
- Render HTML with solid background color.
- Using GDI text rendering.
- Using "HtmlRender.RenderToImage" methods.
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.
Image background
- Using GDI text rendering.
Transparent background
- Render HTML with transparent background.
- Using GDI+ text rendering.
- Using "HtmlRender.RenderToImageGdiPlus" methods.
Default TextRenderingHint - SingleBitPerPixelGridFit
Image image = HtmlRender.RenderToImageGdiPlus(html, 460);
- The image background is fully transparent.
- Rendered text is not as smooth as with GDI text rendering.
- Used SingleBitPerPixelGridFit TextRenderingHint
AntiAlias TextRenderingHint
Image image = HtmlRender.RenderToImageGdiPlus(html, 460, 0, TextRenderingHint.AntiAlias);
- The image background is fully transparent.
- Rendered text is blurred by Anti-Aliasing.