你可以使用PhantomJS，这是一个无头webkit (safari和chrome(直到最近)的渲染引擎)驱动程序。您可以在这里学习如何对页面进行屏幕捕获。希望有帮助!

你可以添加引用HtmlRenderer到你的项目，并执行以下操作:

string htmlCode ="<p>This is a sample html.</p>";
Image image = HtmlRender.RenderToImage(htmlCode ,new Size(500,300));

你可以使用PhantomJS，这是一个无头webkit (safari和chrome(直到最近)的渲染引擎)驱动程序。您可以在这里学习如何对页面进行屏幕捕获。希望有帮助!

我也在思考这个问题。 我发现这是解决你问题的最好办法

我们可以使用javascript的HTML -to-image库将HTML代码转换为图像

NPM安装html-to-image

HTML代码

<div>
<div id="capture">
 <p>
    <span>Heading Of Image</span><br></br>
    <span>This is color Image</span><br></br>
    <img src="Your/ImagePath/ifany.jpg" width="100%" />
    <span>Footer Of the Image</span>
 </p>
</div>
<h2>Generated Image</h2>
<div id="real">
</div></div>

Javascript代码

var htmlToImage = require('html-to-image');
var node = document.getElementById('capture');
htmlToImage.toJpeg(node, { quality: 1, backgroundColor: "#FFFFFF", height: node.clientHeight, width: node.clientWidth })
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        var div = document.getElementById("real")
        div.appendChild(img)
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

通过这个例子，你现在可以在<div>标签中看到你的图像，其中id = 'real'。 现在可以在代码中添加保存和下载或上传图像选项。

有很多选择，它们都有各自的优点和缺点。

选项1:使用API

ApiFlash(基于chrome) EvoPDF(有html选项) Grabzit HTML/CSS图像API .．.

Pros

执行Javascript 近乎完美渲染 正确使用缓存选项时快速 缩放由api处理 精确计时，视口，… 大多数时候，他们提供的是免费方案

Cons

如果你打算经常使用它们，就不是免费的

选项2:使用众多可用库中的一个

dom-to-image Wkhtmltoimage(包含在wkhtmltopdf工具中) IMGKit(用于ruby和基于wkhtmltoimage) Imgkit(适用于python，基于wkhtmltoimage) python-webkit2png .．.

Pros

大多数时候，转换是相当快的

Cons

坏的呈现 不执行javascript 不支持最近的网页功能(FlexBox，高级选择器，网页字体，盒子大小，媒体查询，…) 有时不容易安装 缩放复杂

选项3:使用PhantomJs和包装器库

PhantomJs node-webshot(用于PhantomJs的javascript包装库) .．.

Pros

执行Javascript 很快

Cons

坏的呈现 不支持最近的网页功能(FlexBox，高级选择器，网页字体，盒子大小，媒体查询，…) 缩放复杂 不那么容易使它工作，如果有图像要加载…

选项4:使用Chrome Headless和一个包装器库

Chrome无头 chrome-devtools-protocol Puppeteer (Chrome无头浏览器的javascript包装库) .．.

Pros

执行Javascript 近乎完美渲染

Cons

要得到想要的结果并不容易: 页面加载时间 视窗尺寸 缩放复杂 相当慢，甚至更慢，如果html包含外部链接

披露:我是ApiFlash的创始人。我尽力提供了一个诚实而有用的答案。

我在Chrome、Firefox和MS Edge上使用的唯一一个库是rasterizeHTML。它输出比HTML2Canvas更好的质量，并且仍然受支持，不像HTML2Canvas。

获取元素和下载为PNG

var node= document.getElementById("elementId");
var canvas = document.createElement("canvas");
canvas.height = node.offsetHeight;
canvas.width = node.offsetWidth;
var name = "test.png"

rasterizeHTML.drawHTML(node.outerHTML, canvas)
     .then(function (renderResult) {
            if (navigator.msSaveBlob) {
                window.navigator.msSaveBlob(canvas.msToBlob(), name);
            } else {
                const a = document.createElement("a");
                document.body.appendChild(a);
                a.style = "display: none";
                a.href = canvas.toDataURL();
                a.download = name;
                a.click();
                document.body.removeChild(a);
            }
     });