html2canvas example

how to use html2canvas

by Alexander Gusman

HTML

<script src="https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-rc.1/html2canvas.js"></script>
<div id="capture" onclick="this.contentEditable='true';">
  <span>test ✌️</span>
</div>

<button onclick="takeScreenShot()">to image</button>

CSS

#capture {
  font-size: 64px;
  background: lightgreen;
  padding: 5px;
  display: inline-block;
}

button {
  display: block;
  height: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}

JavaScript

window.takeScreenShot = function() {
  html2canvas(document.querySelector("#capture"), { foreignObjectRendering: true }).then(canvas => {
    document.body.appendChild(canvas)
  });
}