html2canvas example

how to use html2canvas

by dj19910501

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div id="target">
    <div style="display: inline-block; width: 80px; vertical-align: top;">
    12312312321
    </div>
    <div style="display: inline-block; width: 80px; vertical-align: top;">
    12312312321
    </div>
    <div style="display: inline-block; width: 80px; vertical-align: top;">
    12312312321
    </div>
    <div style="display: inline-block; width: 80px; vertical-align: top;">
    12312312321
    </div>
    <div style="display: inline-block; width: 80px; vertical-align: top;">
    12312312321
    </div>
    <div style="display: inline-block; width: 80px; vertical-align: top;">
    12312312321
    </div>
    <div style="display: inline-block; width: 80px; vertical-align: top;">
    12312312321
    </div>
    <div style="display: inline-block; width: 80px; vertical-align: top;">
    12312312321
    </div>
    <div style="display: inline-block; width: 80px; vertical-align: top;">
    12312312321
    </div>
    <div style="display: inline-block; width: 80px; vertical-align: top;">
    12312312321
    </div>
    <div style="display: inline-block; width: 80px; vertical-align: top;">
    12312312321
    </div>
    <div style="display: inline-block; width: 80px; vertical-align: top;">
    12312312321
    </div>
    <div style="display: inline-block; width: 80px; vertical-align: top;">
    12312312321
    </div>
    <div style="display: inline-block; width: 80px; vertical-align: top;">
    12312312321
    </div>
    <div style="display: inline-block; width: 80px; vertical-align: top;">
    12312312321
    </div>
    <div style="display: inline-block; width: 80px; vertical-align: top;">
    12312312321
    </div>
    <div style="display: inline-block; width: 80px; vertical-align: top;">
    12312312321
    </div>
    <div style="display: inline-block; width: 80px; vertical-align: top;">
    12312312321
    </div>
    <div style="display: inline-block;...

CSS

#target{
    width: 300px;
    height: 200px;
    overflow: auto;
}

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

.html2canvas-container { 
width: 3000px !important; 
height: 3000px !important; 
}

JavaScript

window.takeScreenShot = function() {
    var newDiv = document.createElement("div");
    document.getElementById("target").childNodes.forEach(function(node){
      newDiv.appendChild(node.cloneNode(true));

    });
    newDiv.style.position = 'absolute';
    newDiv.style.top = '10000px';
    document.body.appendChild(newDiv);

    html2canvas(newDiv, {
        onrendered: function (canvas) {
        		debugger;
            document.body.removeChild(newDiv);
            document.body.appendChild(canvas);
        }
    });
}