How to take a screenshot in html with javascript?

Question

I'm a newbie in html and javascript. And I'm trying to take a screenshot of my page of html and save it as jpg or png file.

Here is my html image

I want to take a screenshot of right side(colored with gray) with those drag and drop divs by pressing Image Save button at the right corner from image.

How can I take a screen shot with html and javascript? I saw some of html2canvas but that is not what I want. I think..

Does anybody have an idea for this?

Thanks,

ps if you want the code of my html, I can EDIT

Answer 1

You can only capture images or video frames as a screenshot using Canvas. But if you want to capture particular element on a web page try some library like this: html2canvas

Here is the code:

Note: Adjust dimensions carefully in drawImage() function

 $(".drag").draggable(); $(".drag").droppable(); var takeScreenShot = function() { html2canvas(document.getElementById("container"), { onrendered: function (canvas) { var tempcanvas=document.createElement('canvas'); tempcanvas.width=350; tempcanvas.height=350; var context=tempcanvas.getContext('2d'); context.drawImage(canvas,112,0,288,200,0,0,350,350); var link=document.createElement("a"); link.href=tempcanvas.toDataURL('image/jpg'); //function blocks CORS link.download = 'screenshot.jpg'; link.click(); } }); }

 #container{ width:400px; height:200px; } #rightcontainer{ width:300px; height:200px; background:gray; color:#fff; margin-left:110px; padding:10px; } #leftmenu{ color:#fff; background-color:green; width:100px; height:200px; position:fixed; left:0; padding:10px; } button{ display:block; height:20px; margin-top:10px; margin-bottom:10px; } .drag{ width:40px; height:20px; background-color:blue; z-index:100000; margin-top:10px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> <button onclick="takeScreenShot()">Snapshot</button> <div id="container"> <div id="leftmenu"> Left Side <div class="drag"> </div> <div class="drag"> </div> <div class="drag"> </div> Drag-----------> & Click Snapshot </div> <div id="rightcontainer"> Right Side </div> </div>