html2canvas example

how to use html2canvas

by vijayweb

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div id="target">
    <div class='reformat'><img src="https://pngimg.com/uploads/twitter/twitter_PNG34.png"></div>
</div>

<button onclick="takeScreenShot()">to image</button>

<div id='output'>
 asdfasfd
 </div>

CSS

#target{
    width:300px;
    height:200px;
    background:blue;
    color:#fff;
    padding:10px;
}

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

JavaScript

window.takeScreenShot = function() {
    html2canvas(document.getElementById("target"), {
    allowTaint: true,
        onrendered: function (c) {
            document.body.appendChild(c);
        },
      
    });
}