Search code examples
c#htmlnreco

NReco.ImageGenerator doesn't show images and styles


I am trying to convert my simple html document into image. I am using NReco.ImageGenerator for this. But it does not show included image and styles

I am using Windows 10

Here is my code

var html = File.ReadAllText("main.html");
var htmlToImageConv = new NReco.ImageGenerator.HtmlToImageConverter();
var jpegBytes = htmlToImageConv.GenerateImage(html, "png");
File.WriteAllBytes("image.png", jpegBytes);

It is html document

It is html document

In browser

In browser

My code's output

My code's output


Solution

  • The problem is that NReco will be unable to find the file of the image in the html.

    Two possible solutions that immediately come to mind.

    Host the image on a valid URL or use an inline image using base64 encoding in the html.

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <link href="style.css" rel="stylesheet">
    </head>
    <body>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAADcAQMAAAAhlF3CAAAABlBMVEX///8AAABVwtN+AAABCUlEQVRYhe3XMQ6DMAwF0I8YMuYIHIWjNUfjKByBkQGR2okTUFXaMPMttbR5TJadOIglAgB9YiwrC4iKEzT6GAb5PzvBNa3gRTT0mqn+lL61k8dOvIeSW8ARr1EqkHgfa/NuwCCN+72zH4wlFPP2VlaI//EUWn2X8Vy0TPXylasvTm7HuHR6IhAbMO1kApu9qc3rd8stMW9vegjE2p976tFAbECN4LXyZPwYLLfEA6UVc/rqhAHpT6s+4l+sMcQDbXsjhnIAaLFZ5UnDdulDbMEpJdaumLP+dvY20fB0xTzS54l3MZ8QUeeRMU//RHymr04YxFYszVvnW8svMZYbQI56CcepP4m/8Q15PctBEVIBfQAAAABJRU5ErkJggg==" />
    <p class="text">Some text</p>
    </body>
    </html>

    or use a local file url like file:///

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <link href="style.css" rel="stylesheet">
    </head>
    <body>
    <img src="file:///C:/Users/jdarling/Desktop/SO_20190718/images/back.png" />
    <p class="text">Some text</p>
    </body>
    </html>