JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<script src="https://html2canvas.hertzen.com/build/html2canvas.js"></script>
<div class="container">
    <h1 class="test">Test</h1>
</div>

CSS

html, body{
  width:100%;
  height:100%;
}

.container {
}

.test {
  background: #3399cc;
  padding: 50px;
}

JavaScript

toScaledRaster({
  selector: ".container",
  scaleFactor : 3,

});
//  callback : function(img){
//    window.open(img,'_blank');
//  }
/**
 * @param {Object} o options
 * @param {String|Element} o.selector Element or Selector string e.g .myClass
 * @param {Function} o.callback Callback with one parameter : img
 * @param {Number} o.scaleFactor Factor to scale the image
 */
function toScaledRaster(o) {

  var body, el, elRect, elClone;
  
   if (o.selector instanceof Node) {
    el = o.selector;
  } else {
    el = document.querySelector(o.selector);
  }
  if (!o.scaleFactor) o.scaleFactor = 1;
  if (!o.callback) o.callback = console.log;
  body =  document.querySelector("body");
  elClone = el.cloneNode(true);
  elRect = el.getBoundingClientRect();
  elClone.style.transform = "scale(" + o.scaleFactor + "," +  o.scaleFactor + ")";
  elClone.style['transform-origin'] = "0 0 ";
  elClone.style.position = "absolute";
  elClone.style.top = 0;
   elClone.style.left = 0;  
  body.appendChild(elClone);
  body.insertBefore(el, elClone);
  res = html2canvas(elClone, {
  width : 2000,
  height: 2000,
    onrendered: function(canvas) {
    elClone.remove();
      o.callback(canvas.toDataURL("image/png"));
    }
  })
}