JSFiddle - React, Tailwind, and code Playground

by Marc Brooks

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image-more/3.4.3/dom-to-image-more.js"></script>
<h2>Source</h2>
<div id="dom-node">
Some text
</div>

<div>
<h2>Clone</h2>
<div id="catcher">
</div>
</div>

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

CSS

#dom-node {
  background-color: white;
  width: 300px;
  height: fit-content;
  border: 1px solid #000;
  padding: 20px;
  margin-bottom: 20px;
}

JavaScript

const content = document.getElementById('dom-node');
    const {
      height,
      width
    } = content.getBoundingClientRect();

    var catcher = document.getElementById('catcher');

    function cloneCatcher(clone) {
      catcher.replaceChildren(clone);
      return clone;
    }

    domtoimage.toBlob(content, {
        height,
        width,
        copyDefaultStyles: true,
        onclone: cloneCatcher,
      })
      .then(blob => {
        var img = new Image();
        document.getElementById('result').appendChild(img);
        const url = URL.createObjectURL(blob)
        img.src = url;
      })
      .catch(function(e) {
        console.log(e);
      })