html2canvas example

how to use html2canvas

by Shashank D

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div id="target">
<div class="d3view-legends-container top-legends" data-type="main" data-id="106" style="left: 85px;top: 36px;width: 2092px;position: fixed;z-index: 20000;">
        <div class="legend-header border-bottom">

            <i class="fa fa-caret-down toggle-legends" style=""></i>
            <h4>Legends</h4>


            

            


            <span class="legend-search-toggle ">
                <span class="fa fa-search"></span>
            </span>

            <span class="dropdown legend-container-options">
                <span href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" style="display:inline-block;" aria-expanded="false">
                    <span class="fa fa-ellipsis-v"> </span>
                </span>
                <ul class="dropdown-menu input-edit-icons">

                    <li class="">
                        <a href="javascript:void(0)" data-id="selectall">

                            
                                <span class="select-icon fa fa-check-square-o"></span> <span class="select-label">Select all</span>
                            

                        </a>
                    </li>

                    <li class="">
                        <a href="javascript:void(0)" data-id="autofit">
                            |<i class="fa fa-arrows-h"></i>| Autofit
                        </a>
                    </li>
                    <li class="">
                        <a href="javascript:void(0)" data-id="opacity">
                            <i class="fa fa-adjust"></i> Opacity (0-1)
                        </a>
                        <div class="opacity_slider" style="margin-top: 3px;    padding: 0 20px;">
                            <input type="range" min="0.1" max="1" value="1" step="0.01">
                        </div>
                    </li>

                ...

CSS

/* d3view legends container */
div.d3view-legends-container {
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    /*border: 1px solid transparent;*/
    border: 1px solid #ccc!important;
    /*!*background-color: #fff!important;*!*/
    /*background-color: rgba(0,0,0,0.01);*/
    background-color: rgba(255,255,255,1);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    min-width: 150px;
    z-index:7;
    margin-right: 10px;
}
div.d3view-legends-container.newton-clone {
    height: auto!important;
    width: auto!important;
    background: transparent!important;
}
div.d3view-legends-container.newton-clone .legend-header {
    display: none;
}
div.d3view-legends-container.newton-clone div.legends-body {
    max-height: initial!important;
    background: transparent!important;
}
div.d3view-legends-container input {
    height: auto!important;
}
div.d3view-legends-container:not(.toggled):not(.bottom-legends) {
    /*min-height: 60px;*/
}

div.d3view-legends-container.exporting.newton-clone .toggle-list-container {
    display: none!important;
}
div.d3view-legends-container.exporting.newton-clone ul.legends-list {
    display: block!important;
}

/* on hover */
div.d3view-legends-container:hover, div.d3view-legends-container.dragging, div.d3view-legends-container.resizing, div.d3view-legends-container.opened {
    /*border: 1px solid #CCC;*/
    /*background-color: rgba(0,0,0,0.01);*/
}
div.d3view-legends-container:hover .ui-resizable-handle, div.d3view-legends-container.dragging .ui-resizable-handle,
div.d3view-legends-container.resizing .ui-resizable-handle, div.d3view-legends-container.opened .ui-resizable-handle {
    display: block!important;
}
div.d3view-legends-container:hover div.legend-header, div.d3view-legends-container.dragging .legend-header,
div.d3view-legends-container.resizing .legend-header, div.d3view-legends-container.opened .legend-header {
    opacity: 1!important;
    border-bottom: 1px...

JavaScript

window.takeScreenShot = function() {
    html2canvas(document.getElementById("target"), {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        },
        width:320,
        height:220
    });
}