HtmlRender.Render - Pixilated Images

Nov 14, 2013 at 6:23 PM
I wrote the following code which worked flawlessly. Started up the project the next day and now all the images are pixilated, bolded text. I have no idea what would have caused the issue. Any suggestions would be greatly appreciated.
        protected Bitmap createAutoHeightImage( string htmlString, int bitmapWidth )
        {
            Bitmap m_Bitmap = new Bitmap( 400, 600 );
            PointF point = new PointF( 0, 0 );
            SizeF maxSize = new System.Drawing.SizeF( 500, 500 );

            var css = HtmlRenderer.CssData.Parse( "font-family:Arial,san-serif;font-size:10px;", true );

            maxSize = HtmlRenderer.HtmlRender.Measure( Graphics.FromImage( m_Bitmap ), htmlString, bitmapWidth );
            Bitmap theImage = new Bitmap( (int)maxSize.Width, (int)maxSize.Height );
            HtmlRenderer.HtmlRender.Render( Graphics.FromImage( theImage ), htmlString, point, maxSize, css );

            return theImage;
        }

string myHTML = "<html><body><p>This is a <strong>nice</strong> html code</p></body></html>";
createAutoHeightImage( myHTML, 600 ).Save( @"D:\inetpub\wwwroot\imagetext\question.png", ImageFormat.Png );
Before: Image
After: Image
Developer
Nov 14, 2013 at 8:33 PM
You probably updated the version from 1.4.5.0
It is the result of a change I made to using GDI text rendering
Try "HtmlRenderer.HtmlRender.RenderToImage" method, the code should be simpler and the resulting HTML image should be clear.
Let me know if it worked.
Nov 14, 2013 at 8:50 PM
Thanks for the quick reply. I have tried the HtmlRender.RenderToImage method which did work better the text is now clear again. However, the background is now returning as black - I need to have it transparent. This is what I wrote:
var css = HtmlRenderer.CssData.Parse( "font-family:Lucida Handwriting;font-size:10px;", true );
Image theImage = HtmlRender.RenderToImage( htmlString, (int)maxSize.Width, (int)maxSize.Height, Color.Transparent, css );
Image

Also, I don't know if I'm using the CssData.Parse properly - but it doesn't appear to be applying anything to the image.
Developer
Nov 14, 2013 at 9:23 PM
Sorry, transparent background is the only thing that is not supported :(
You will have to use 1.4.5.0
Note that the rendered HTML does looks better, why do you need transparent background?
Nov 14, 2013 at 9:27 PM
I'll try using 1.4.5.0. I need to place a watermark image behind the images I am rendering with HtmlRender, hence I need the backgrounds of these images to be transparent.
Developer
Nov 14, 2013 at 9:34 PM
Maybe you can do it using HTML background image, place a background image on the body of the HTML using CSS.
Nov 15, 2013 at 2:01 AM
Edited Nov 15, 2013 at 2:09 AM
This was the plan – but it won’t show through the images unless they are transparent.

I ended up doing the following:
 Image theImage = HtmlRender.RenderToImage( htmlString, (int)maxSize.Width, (int)maxSize.Height, Color.White, css );

( (Bitmap)theImage ).MakeTransparent( ( (Bitmap)theImage ).GetPixel( 1, 1 ) );
It works, but isn't the best solution because the anti-aliasing messes with the transparency. The image really needs to have a transparent background first before the text is added to it.
Developer
Nov 15, 2013 at 11:41 AM
Let me clarify, if you want some image to be the background of the rendered html you can do it like so:
  1. save the attached html to 'c:\html.txt'
  2. save this image to 'c:\b.jpg'
  3. run the attached code
Code to run:
var img = HtmlRender.RenderToImage(File.ReadAllText(@"c:\html.txt"), 600);
HTML to render:
<style>
body{
margin: 0px;
padding: 0px 15px;
font-family:Arial,san-serif;
font-size: 20px;
background-image:url('c:\b.jpg');
}
.green{
background-color:rgba(0,255,0,60)
}
</style>

<html>
<body>
<p class="green">This is a <strong>nice</strong> html code</p>
<p>Hopefully this wraps around without any issues. We must make sure that this can wrap properly without issues.</p>
<p>Hopefully this wraps around without any issues. We must make sure that this can wrap properly without issues.</p>

<p>Hopefully this wraps around without any issues. We must make sure that this can wrap properly without issues.</p>

</body>
</html>
Result:
Image

Note:
  • The background image is repeated by default but this can be changed using css
  • I set the green background to be partially transparent to show it is possible
  • you can extract the embedded css inside <style> element outside using 'CssData.Parse' and pass it to 'HtmlRender.RenderToImage'
hope it helps.
Developer
Mar 10, 2014 at 2:08 PM
In case it is still relevant, all you need to know is described here: Generate image from HTML markup
Marked as answer by ArthurTep on 3/10/2014 at 7:08 AM