Table to Image

HTML

<script src="https://github.com/niklasvh/html2canvas/releases/download/0.5.0-alpha1/html2canvas.js"></script>
<table id="myTable">
  <tr>
    <th>Something</th>
    <th>Something else</th>
    <th>Another column</th>
  </tr>
  <tr>
    <td>A</td>
    <td>C</td>
    <td>E</td>
  </tr>
  <tr>
    <td>B</td>
    <td>D</td>
    <td>F</td>
  </tr>
</table>

<button id="convert">
Convert to image
</button>

<div id="result">
<!-- Result will appear be here -->
</div>

CSS

body {
  background-color: white;
  font-family: sans-serif;
}

table {
  background-color: #f2f2f2;
}

table td, table th {
  padding: 10px;
}

JavaScript

//convert table to image
function convertToImage() {
  var resultDiv = document.getElementById("result");
  html2canvas(document.getElementById("myTable"), {
    onrendered: function(canvas) {
       var img = canvas.toDataURL("image/png");
       result.innerHTML = '<img src="'+img+'"/>';
    }
  });
}

//click event
var convertBtn = document.getElementById("convert");
convertBtn.addEventListener('click', convertToImage);