html2canvas example

how to use html2canvas

by Dhanck

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div id="target">
    <iframe src="http://forbeshub.com"></iframe>
    <iframe src="http://google.com"></iframe>
    <iframe src="http://yahoo.com"></iframe>
    <iframe src="http://forbes.com"></iframe>
    <iframe src="http://netflix.com"></iframe>
    <iframe id="if1" width="100%" height="254" style="visibility:visible" src="http://www.google.com/custom?q=&btnG=Search"></iframe>
</div>

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

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"), {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        },
        width:320,
        height:220
    });
}