HTML + CSS到png图像

Question

我需要从HTML创建包含图像和重css的PNG图像。

Answer 1

您可以使用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 />