HtmlRender.Render generates unformatted image

Oct 18, 2013 at 7:31 PM
Hi
I'm trying to use HtmlRender.Render to generate bitmap of some HTML text, but the generated image just has black text without any sort of formatting (colors, fonts, background, etc.)

The code is pretty simple:
        Bitmap bmp = new Bitmap(width, height);
        PointF point = new PointF(0, 0);
        SizeF maxSize = new System.Drawing.SizeF(width, height);

        HtmlRenderer.HtmlRender.Render(Graphics.FromImage(bmp), html, point, maxSize);
I tried also to create a simple cssData object and pass it to the call, but didn't work. I used:
       var css = HtmlRenderer.CssData.Parse(GetStylesheet(), true);
where GetStyleSheet() is a simple function that returns a style sheet (copied from the Demo app)

What am I missing? I'm pretty sure it is something simple... I'm kind of newbie here :)

thanks
Bhima
Developer
Oct 19, 2013 at 4:49 PM
Update to 1.4.8.0 and use HtmlRender.RenderToImage method.
If you still have issues please post a sample html.
May 4, 2014 at 11:04 AM
Hi I am facing a similar issue. Here is my function to render image:
private void SaveImageFromHtml(MvcHtmlString html)
        {
            var decodedHtml = html.ToHtmlString();
            var cssData = HtmlRenderer.CssData.Parse(GetStyleSheet(), true);
            Image image = HtmlRender.RenderToImage(decodedHtml, cssData: cssData);

            var bitmap = new Bitmap(image);
            bitmap.Save(@"D:\Test.png", ImageFormat.Png);
        }
The GetStyleFunction() is simple:
private string GetStyleSheet()
        {
            return @".inner {
                        width:960px;
                        margin: 0px auto;
                    }

                    .inner .left-col {
                        width: 200px;
                        height:1200px;
                        background-color: #2c2c2c;
                        display:block;
                        font-family:Tahoma, Geneva, sans-serif;
                        font-size:40px;
                        color:#999;
                        text-align:center;
                        float:left;
                    }
      }
But the image is produced with no css styling being applied. I am not sure what is happening. I am using version 1.4.14.0
Any pointers will be much appreciated!
Developer
May 4, 2014 at 2:25 PM
  1. tested with "<p class='inner'>hello <p class='left-col'>world</p></p>" and the styles were applied, can you add a sample html.
  2. float style is not supported, sorry.
  3. you don't need to wrap the returned image with another image.
  4. how is that similar to bhima1 issue?
May 4, 2014 at 3:16 PM
Hey, thanks for your reply. I said it was similar in the sense that I was struggling with the css styles. I had no idea that float isnt supported. That was probably the issue, as I saw everything getting just stacked up.
Here is a sample Html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
    <style type="text/css">
        .inner {
            width: 960px;
            margin: 0px auto;
        }

            .inner .left-col {
                width: 200px;
                height: 1200px;
                background-color: #2c2c2c;
                display: block;
                font-family: Tahoma, Geneva, sans-serif;
                font-size: 40px;
                color: #999;
                text-align: center;
                float: left;
            }

            .inner .header {
                height: 200px;
                width: 760px;
                background-color: #bd212f;
                float: right;
            }

            .inner .title {
                width: 710px;
                height: 60px;
                line-height: 60px;
                background: #36C;
                float: right;
                margin: 15px;
                padding: 10px;
                font-family: Verdana, Geneva, sans-serif;
                color: #fff;
                font-size: 30px;
            }

            .inner .product-info {
                width: 730px;
                float: right;
                margin-right: 15px;
            }

                .inner .product-info .image_url {
                    width: 450px;
                    float: left;
                    border: 2px solid #333;
                }

                    .inner .product-info .image_url img {
                        max-width: 450px;
                    }

                .inner .product-info .info-1 {
                    width: 240px;
                    float: right;
                    height: 334px;
                    background-color: #666;
                    padding: 10px;
                }


                    .inner .product-info .info-1 h1 {
                        font-family: Tahoma, Geneva, sans-serif;
                        font-size: 16px;
                        color: #fff;
                        padding: 0px;
                        line-height: 10px;
                    }

                .inner .product-info .description {
                    float: right;
                    margin-top: 15px;
                    display: block;
                    padding: 5px;
                    width: 720px;
                }

                .inner .product-info .alt-images {
                    float: right;
                    width: 730px;
                    height: 200px;
                    margin-top: 20px;
                }
                    .inner .product-info .alt-images ul {
                        padding: 0;
                        margin: 0;
                    }

                        .inner .product-info .alt-images ul li {
                            list-style: none;
                            display: inline;
                            margin-right: 5px;
                            border: 1px solid #e1e1e1;
                        }

                            .inner .product-info .alt-images ul li.last {
                                margin-right: 0px;
                            }

                    .inner .product-info .alt-images li img {
                        max-width: 233px;
                    }
    

    </style>
    </head>
    <body>
        <div id="wrapper">
            <div class="inner">
                <div class="left-col"></div>
                <div class="header"></div>
                <div class="title"></div>
                <div class="product-info" style="width:730px; float:right; margin-right:15px;">
                    <div class="image_url" style="width:450px; float:left; border:2px solid #333;">
                        
                    </div>
                    <div class="info-1"><h1>Technical Specifications</h1>
                        <ul class="desc">
                            <li class="brand"></li>
                            <li class="filling"></li>
                            <li class="cover"></li>
                            <li class="wash_care"></li>
                        </ul>
                        <table>
                            <tr>
                                <td>Offer Price(Ex.VAT)</td>
                                <td>Reference Site Price(Inc.VAT)</td>
                            </tr>
                            <tr>
                                <td class="item_1"></td>
                                <td class="item_1_price"></td>
                                <td class="item_1_rrp"></td>
                            </tr>
                            <tr>
                                <td class="item_2"></td>
                                <td class="item_2_price"></td>
                                <td class="item_2_rrp"></td>
                            </tr>
                            <tr>
                                <td class="item_3"></td>
                                <td class="item_3_price"></td>
                                <td class="item_3_rrp"></td>
                            </tr>
                        </table>
                    </div>
                    <div class="description">
                        Test description...
                    </div>
                    <div class="alt-images">
                        <ul>
                            <li class="image_1_url"></li>
                            <li class="image_2_url"></li>
                            <li class="image_3_url"></li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </body>
</html>
If you could possibly suggest a workaround that will be great. Thank you very much for your response and help
May 4, 2014 at 4:11 PM
Hi, Just to update, I ended up using a Table structure instead of <div> with float enabled. I could have possibly done it using <div> positioning and text-align css properties too. But thought table structure was simpler

Anyways, thanks for letting me know that floats arent supported. It led me to look in the right direction. Much appreciated.
Fantastic work with the project though. Keep up the good work.
Marked as answer by ArthurTep on 5/4/2014 at 8:53 AM