html2canvas example

how to use html2canvas

by abhinav3414

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<button onclick="Take()">to image</button>
<div id="con">
   <div id="div" style="width: 400px;height: 400px;" >
      <div
         id="cat"
         style="position: absolute;top:50px;left:  25px;"
         class="cloudimage-360"
         data-folder="cats/"
         data-filename="{index}.png"
         data-amount="30"
         data-magnifier="2"
         ></div>
   </div>
   <div id="camera" style="position: absolute;top:50px;left:25px">
      Take screenshot of this text
   </div>
</div>
<br><br><br>
<button onclick="Add()" style="margin-top: 40px">+</button>
<button onclick="Moin()">-</button>
<br>
<button onclick="Up()">Up</button>
<br>
<button onclick="Right()" >Right</button>
<button onclick="Left()" > Left </button>
<br>
<button onclick="Down()" > Down </button>
<button onclick="Take()">Take</button>
<canvas id="myCanvas"></canvas>
<div id="addCanvasInside">

</div>

CSS

canvas {
      display: block;
}

JavaScript

function Take() {
    html2canvas(document.querySelector("#camera"), {
        onrendered: function (canvas) {
           // document.body.appendChild(canvas);
            document.querySelector("#addCanvasInside").appendChild(canvas);
        },
        width:320,
        height:220
    });
}