1

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

CDspace
  • 2,639
  • 18
  • 30
  • 36
likvidator3301
  • 13
  • 3
  • When you use 'GenerateImage' method all external references (images, css, js etc) should have absolute URL. Relative URLs work only when you use 'GenerateImageFromFile' (btw it accepts URL as a file name). – Vitaliy Fedorchenko Jul 19 '19 at 06:19

1 Answers1

0

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>
jeffld
  • 726
  • 1
  • 9
  • 17