Convert HTML String to Image

Convert HTML string to image

Thanks all for your responses. I used HtmlRenderer external dll (library) to achieve the same and found below code for the same.

Here is the code for this

public void ConvertHtmlToImage()
{
   Bitmap m_Bitmap = new Bitmap(400, 600);
   PointF point = new PointF(0, 0);
   SizeF maxSize = new System.Drawing.SizeF(500, 500);
   HtmlRenderer.HtmlRender.Render(Graphics.FromImage(m_Bitmap),
                                           "<html><body><p>This is some html code</p>"
                                           + "<p>This is another html line</p></body>",
                                            point, maxSize);

   m_Bitmap.Save(@"C:\Test.png", ImageFormat.Png);
}

Render HTML to an image

There is a lot of options and they all have their pro and cons.

Option 1: Use an API

ApiFlash (based on chrome)
EvoPDF (has an option for html)
Grabzit
HTML/CSS to Image API
...

Pros

Execute Javascript
Near perfect rendering
Fast when caching options are correctly used
Scale is handled by the APIs
Precise timing, viewport, ...
Most of the time they offer a free plan

Cons

Not free if you plan to use them a lot

Option 2: Use one of the many available libraries

dom-to-image
wkhtmltoimage (included in the wkhtmltopdf tool)
IMGKit (for ruby and based on wkhtmltoimage)
imgkit (for python and based on wkhtmltoimage)
python-webkit2png
...

Pros

Conversion is quite fast most of the time

Cons

Bad rendering
Does not execute javascript
No support for recent web features (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Media Queries, ...)
Sometimes not so easy to install
Complicated to scale

Option 3: Use PhantomJs and maybe a wrapper library

PhantomJs
node-webshot (javascript wrapper library for PhantomJs)
...

Pros

Execute Javascript
Quite fast

Cons

Bad rendering
No support for recent web features (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Media Queries, ...)
Complicated to scale
Not so easy to make it work if there is images to be loaded ...

Option 4: Use Chrome Headless and maybe a wrapper library

Chrome Headless
chrome-devtools-protocol
Puppeteer (javascript wrapper library for Chrome headless)
...

Pros

Execute Javascript
Near perfect rendering

Cons

Not so easy to have exactly the wanted result regarding:
- page load timing
- viewport dimensions
Complicated to scale
Quite slow and even slower if the html contains external links

Disclosure: I'm the founder of ApiFlash. I did my best to provide an honest and useful answer.

Convert HTML To Image in .NET Core

I use net-core-html-to-image library that embeds wkhtmltoimage tool. The library is very simple to use. There is a nuget package:

Install-Package CoreHtmlToImage

If you want to convert HTML string to image:

var converter = new HtmlConverter();
var html = "<div><strong>Hello</strong> World!</div>";
var bytes = converter.FromHtmlString(html);
File.WriteAllBytes("image.jpg", bytes);

Or for URLs:

var converter = new HtmlConverter();
var bytes = converter.FromUrl("http://google.com");
File.WriteAllBytes("image.jpg", bytes);

HTML to IMAGE using Python

You can do this by using imgkit

import imgkit

imgkit.from_file('test.html', 'out.jpg')

Or you can also use htmlcsstoimage Api

# pip3 install requests
import requests

HCTI_API_ENDPOINT = "https://hcti.io/v1/image"
HCTI_API_USER_ID = 'your-user-id'
HCTI_API_KEY = 'your-api-key'

data = { 'html': "<div class='box'>Hello, world!</div>",
         'css': ".box { color: white; background-color: #0f79b9; padding: 10px; font-family: Roboto }",
         'google_fonts': "Roboto" }

image = requests.post(url = HCTI_API_ENDPOINT, data = data, auth=(HCTI_API_USER_ID, HCTI_API_KEY))

print("Your image URL is: %s"%image.json()['url'])
# https://hcti.io/v1/image/7ed741b8-f012-431e-8282-7eedb9910b32

Convert HTML String to Image