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

选项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的创始人。我尽力提供了一个诚实而有用的答案。

这里所有的答案都使用第三方库，而在纯Javascript中将HTML渲染为图像可以相对简单。在MDN的画布部分甚至有一篇关于它的文章。

诀窍是这样的:

使用包含XHTML的foreignObject节点创建SVG 将图像的src设置为该SVG的数据url 将图像绘制到画布上 将画布数据设置为目标image.src

const {body} = document const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d') canvas.width = canvas.height = 100 const tempImg = document.createElement('img') tempImg.addEventListener('load', onTempImageLoad) tempImg.src = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml"><style>em{color:red;}</style><em>I</em> lick <span>cheese</span></div></foreignObject></svg>') const targetImg = document.createElement('img') body.appendChild(targetImg) function onTempImageLoad(e){ ctx.drawImage(e.target, 0, 0) targetImg.src = canvas.toDataURL() }

需要注意的一些事情

The HTML inside the SVG has to be XHTML For security reasons the SVG as data url of an image acts as an isolated CSS scope for the HTML since no external sources can be loaded. So a Google font for instance has to be inlined using a tool like this one. Even when the HTML inside the SVG exceeds the size of the image it wil draw onto the canvas correctly. But the actual height cannot be measured from that image. A fixed height solution will work just fine but dynamic height will require a bit more work. The best is to render the SVG data into an iframe (for isolated CSS scope) and use the resulting size for the canvas.

安装幻影

$ npm install phantomjs

用以下代码创建一个文件github.js

var page = require('webpage').create();
//viewportSize being the actual size of the headless browser
page.viewportSize = { width: 1024, height: 768 };
page.open('http://github.com/', function() {
    page.render('github.png');
    phantom.exit();
});

将文件作为参数传递给phantomjs

$ phantomjs github.js

我推荐这个npm包“html-to-image”

描述: ✂️使用HTML5画布和SVG从DOM节点生成图像。

使用方法:

安装

npm install --save html-to-image

使用

/* ES6 */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';

获取一个PNG图像base64编码的数据URL并下载它(使用download):

htmlToImage.toPng(document.getElementById('my-node'))
  .then(function (dataUrl) {
    download(dataUrl, 'my-node.png');
  });

这就是我所做的。

注意:请检查App.js的代码。

链接到源代码

如果你喜欢它，你可以掉一颗星。✌️

更新:

import * as htmlToImage from 'html-to-image';
import download from 'downloadjs';

import logo from './logo.svg';
import './App.css';

const App = () => {
  const onButtonClick = () => {
    var domElement = document.getElementById('my-node');
    htmlToImage.toJpeg(domElement)
      .then(function (dataUrl) {
        console.log(dataUrl);
        download(dataUrl, 'image.jpeg');
      })
      .catch(function (error) {
        console.error('oops, something went wrong!', error);
      });
  };
  return (
    <div className="App" id="my-node">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a><br></br>
        <button onClick={onButtonClick}>Download as JPEG</button>
      </header>
    </div>
  );
}

export default App;

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

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