JSFiddle - React, Tailwind, and code Playground

by Alexandru Mihai

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.7.2/bluebird.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<div id="target">
<img id="img"...

CSS

#target{
    color:#fff;
    padding:10px;
}

#svg_image{
   width:500px;
   height: 300px;
}

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

JavaScript

window.takeScreenShot = function() {
    html2canvas(document.getElementById("target"), {
        onrendered: function (canvas) {
            document.getElementById('svg_image').appendChild(canvas);
        },
        logging: true,
        allowTaint: true,
        useCORS: true,
    });
}