Generate image from HTML markup
HTML Renderer can be used to generate image (pmg, jpeg, bmp...) from HTML markup string.Because of GDI text rendering issue with alpha channel and clear type text rendering, rendering to image requires special handling, for details 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.
- Generate image with solid color background
- Generate image with image background
- Generate image with transparent background
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.