JSFiddle - React, Tailwind, and code Playground

by jorgecasar

HTML

<script src="http://appsnippetpreview.com/js/html2canvas.js"></script>
<h1>Image with border-radius</h1>
<div id="test1" class="test">
    <img src="https://pbs.twimg.com/profile_images/378800000408914874/3769b2228d34560217f64114efb0fd6c.png" />
</div>
<button>Render</button>
<div id="result1" class="result"></div>
<h1>Image warpper with border-radius</h1>
<div id="test2" class="test"><img src="https://pbs.twimg.com/profile_images/378800000408914874/3769b2228d34560217f64114efb0fd6c.png" /></div>
<button>Render</button>
<div id="result2" class="result"></div>

CSS

.test, .result {
    display:inline-block;
    width:100px;
    height:100px;
}
img {
    display: block;
    width: 100%;
    height:100%;
}
#test1 img, #test2 {
    border-radius:20px;
    overflow: hidden;
}

JavaScript

(function(){
      var render = function(src, dst){
        html2canvas(src, {
            onrendered: function(canvas) {
                dst.appendChild(canvas);
            },
            width: 100,
            height: 100
        });
    }
    var buttons = document.querySelectorAll('button');
    for(button in buttons) {
        buttons[button].addEventListener('click', function(e){
            render(e.currentTarget.previousElementSibling, e.currenTarget.nextElementSibling);
        });
    };
})();