JSFiddle - React, Tailwind, and code Playground

by tsayen

HTML

<script src="https://rawgit.com/tsayen/dom-to-image/master/src/dom-to-image.js"></script>
<div id="dom-node">
  <div id="child"></div>
  <div>scaled text which is a little longer and centered<div>
</div>

<div id="result">
</div>

CSS

#dom-node {
  width: 100px;
  height: 100px;
  background-color: grey;
  text-align:center;
}

#child {
  height: 30px;
  width: 30px;
  background-color: lightgrey;
}

#result {
  margin-top: 10px;
}

JavaScript

domtoimage.toPng(document.getElementById('dom-node'), {
  width: 200,
  height: 200,
  style: {
    'transform': 'scale(2)',
    'transform-origin': 'top left'
  }
}).then(function(data) {
  var img = new Image();
  document.getElementById('result').appendChild(img);
  img.src = data;
})