JSFiddle - React, Tailwind, and code Playground

by Sunny Sharma

HTML

<script src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<div class="content">
    <div class="image">
        <img src="http://www.ricoh.com/r_dc/r/r8/img/sample_10.jpg" height="150px" width="150px;" alt="" />
    </div>
    <div class="bottom-text">Sample Text</div>
</div>
<div class="output"></div>

CSS

div.content {
    position:relative;
    height:150px;
    width:150px;
    float:left;
}
div.bottom-text {
    position:absolute;
    bottom:0;    
    right:0;
    left:0;
    font-size:25px;
    color:#fff;
    background:#1a1a1a;
    opacity:0.5;
    padding:5px;
}
div.output {
    height:200px;
    width:200px;
    float:left;
    margin-left:20px;
  
}

JavaScript

$(document).ready(function () {
    html2canvas($('div.content'), {
        allowTaint:true,
        useCORS:true,
        onrendered: function (canvas) {
            $('div.output').append(canvas);
        }
    })
});