JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/tsayen/dom-to-image/master/src/dom-to-image.js"></script>
<div id="my-node-parent">
    <div id="my-node">
        <div id="my-node-child">DIV</div>
        <img src="/img/logo.png" style="width:100px;"/>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}
#my-node {
    font-weight: bold;
    border:1px solid red;
    margin-bottom:10px;
    width:150px;
}
#my-node-child {
    border: 1px solid lightgrey;
    padding: 1em;
}

JavaScript

var parent = document.getElementById('my-node-parent');
var node = document.getElementById('my-node');

var canvas = document.createElement('canvas');
canvas.width = node.scrollWidth;
canvas.height = node.scrollHeight;
/*
domtoimage.toPng(node).then(function (pngDataUrl) {
    parent.removeChild(node);
    for (var i = 0; i < 1; i++) {
        var img = new Image();
        img.src = pngDataUrl;
        parent.appendChild(img);
    }
});
*/

function filter (node) {
    return (node.tagName !== 'i');
}


		domtoimage.toPng(node)
		.then(function (dataUrl) {
			var img = new Image();
			img.src = dataUrl;
      
			document.body.appendChild(img);
		})
		.catch(function (error) {
			console.error('oops, something went wrong!', error);
			alert('oops, something went wrong!', error);
      domtoimage.toSvg(node, {filter: filter})
    .then(function (dataUrl) {
        /* do something */
        var img = new Image();
			img.src = dataUrl;
      
			document.body.appendChild(img);
    });
      
		});