我在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);
            }
     });

是的。HTML2Canvas的存在是为了将HTML渲染到<canvas>上(你可以将其用作图像)。

注意:有一个已知的问题，这将不适用于SVG

我不认为这是最好的答案，但它似乎很有趣，可以发布。

编写一个应用程序，打开您最喜欢的浏览器到所需的HTML文档，适当大小的窗口，并采取屏幕截图。然后，删除图像的边界。

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

我们可以使用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'。 现在可以在代码中添加保存和下载或上传图像选项。

我知道这是一个已经有很多答案的老问题，但我仍然花了很多时间去做我想做的事情:

给定一个HTML文件，从命令行生成一个带有透明背景的(png)图像

使用Chrome headless (version 74.0.3729.157)，实际上很容易:

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless --screenshot --window-size=256,256 --default-background-color=0 button.html

命令使用说明:

you run Chrome from the command line (here shown for the Mac, but assuming similar on Windows or Linux) --headless runs Chrome without opening it and exits after the command completes --screenshot will capture a screenshot (note that it generates a file called screenshot.png in the folder where the command is run) --window-size allow to only capture a portion of the screen (format is --window-size=width,height) --default-background-color=0 is the magic trick that tells Chrome to use a transparent background, not the default white color finally you provide the html file (as a url either local or remote...)

你可以使用像wkhtmltopdf这样的HTML转PDF工具。然后你可以使用像imagemagick这样的PDF图像工具。不可否认，这是服务器端，一个非常复杂的过程…