html2canvas

by Malin Jayakody

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<div class="parent">
  <div class="container">
    <div class="test">
      <div class="content">
        <p style="font-size:5vw;font-weight:bold;">Summary</p>
        <div style="font-size:2vmax;">
          <h1>test</h1>
          <p><em><strong style="text-decoration:underline;">test</strong></em></p>
          <ul>
            <li><b><i>test</i></b></li>
            <li><b><i>test</i></b></li>
            <li><b><i>test</i></b></li>
            <li><b><i>test</i></b></li>
          </ul>
          <ol>
            <li><b><i>test</i></b></li>
            <li><b><i>test</i></b></li>
            <li><b><i>test</i></b></li>
            <li><b><i>test</i></b></li>
            <li><b><i>test</i></b></li>
          </ol>
          <table>
            <tbody>
              <tr>
                <td>test</td>
                <td>test</td>
                <td>tetrs</td>
              </tr>
              <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
              </tr>
              <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="overlay"></div>
    <div class="output"></div>
  </div>
</div>

CSS

body,
.parent {
  padding: 20px;
}

table {
  border-collapse: collapse;
}

table,
table td {
  border: 1px solid #000;
}

table td {
  padding: 20px;
}

ul {
  list-style: none;
}

ul>li::before {
  content: '• ';
  margin-left: -1em;
}

ol {
  list-style-position: inside;
}

.container {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.overlay {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
}

.test {
  width: 1240px;
  height: 877px;
  background-color: yellow;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}

.test>.content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.output {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.output>img {
  width: 100%;
}

JavaScript

;
jQuery(function($) {
  var item = $('.test');
  var htmlItem = item.get(0);
  var clientRect = htmlItem.getBoundingClientRect();
  html2canvas(htmlItem, {
    width: 1240 + clientRect.left,
    height: 877 + clientRect.top,
    onrendered: function(canvas) {
      var imgURI = canvas.toDataURL();
      var img = $('<img>').attr({
        src: imgURI,
        alt: 'Test'
      }).appendTo('.output');
    }
  });
});