将简单的html转换为位图/图像的简单方法是什么？

Question

In my project, i has many simple html text in database eg.

<ul>this is apple</ul>
<ul>this is orange</ul>
<p>I want to <u>eat</u> apple</p>
hello <i>mr</i> orange

In my project, I have a server and a client. the server will read the html text from database, the client is a web client, it must get the html text in form of Image object to display it.(I have my own reason not to display html text directly in DOM......), anyway the client must display everything in the form of image.

Now I think 2 approach to solve this problem.
the first one , server convert 'html text' into image (eg. base64 string) , then send it to client.
or .....
the second one, client get the 'html text' and convert it by javascript to javascript image object in the browser.

my server program is a dot net program.
my client is browser which can run html5, eg. chrome, firefox.

How can I do it?

Answer 1

I have done this before using the js plugin html2canvas
It's not perfect, but it works pretty good, and maybe it improved since I last used it.

If you want to do it on the server side, you can crawl the page with a headless browser like phantomJs and have it create a screenshot for you, but this will probably be more complicated to setup.