HTML+CSS to png image

您可以使用html2canvas。这个库允许您将带有css的html元素保存到canvas中。完成此操作后，可以将画布保存为图像。

看看这个：

document.querySelector('#screenshot').onclick = function() {
  html2canvas(document.querySelector('#board'), {
    onrendered: function(canvas) {
        document.body.appendChild(canvas);
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div id="board">
  <p>
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-link">Link</button>
  </p>
</div>
<hr />
<button id="screenshot" type="button" class="btn btn-default">Take a picture</button>
<hr />