HTML + CSS到png图像[关闭]答案

【问题标题】：HTML+CSS to png image [closed]HTML + CSS到png图像[关闭]
【发布时间】：2015-11-29 11:18:15
【问题描述】：

我需要从 HTML 创建 PNG 图像，其中包括图像和繁重的 css。

【问题讨论】：

感谢分享。我需要你阅读How to ask。
提供详细信息将有助于人们理解问题并为您提供答案。

【解决方案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 />

【讨论】：