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,

p.s. if you want the code of my html, I can EDIT

Possible duplicate of [Using HTML5/Canvas/JavaScript to take screenshots](http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots) — Matthew Lock, Mar 16 '17 at 07:53
@paulc1111 I have revised my answer. I think you want to implement this functionality in your application. — Gaurav Chaudhary, Mar 16 '17 at 10:32

Gaurav Chaudhary · Accepted Answer · 2020-01-23T10:04:50.133

24

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>

edited Jan 23 '20 at 10:04

answered Mar 16 '17 at 08:32

Gaurav Chaudhary

1,491
13
28

@GauravChauddhary Thanks for the answer and sorry for the late response. It works well with screen shot! However, I have one more simple question. – paulc1111 Mar 20 '17 at 00:27
How can I take screenshot right container with those elements which I drag and drop elements...? It only takes screenshots right container right now.. :'( – paulc1111 Mar 20 '17 at 00:29
Should I add more in the takeScreenShot function like document.getElementsByID("draganddrop element") something like this? – paulc1111 Mar 20 '17 at 00:32
@paulc1111 it is because they are not in your DOM tree. If you can add them to DOM tree on "drop" then they will also be captured. But if what if you don't want to update DOM tree on drag-drop, then you have two choices, either do this for each element and combine all those canvas into one canvas but this is not a good approach – Gaurav Chaudhary Mar 20 '17 at 06:44
@paulc1111 the easier method is , you capture left side as well because the "dragdrop" elements will also get included in your DOM, doesnt matter you move them here and there, they will be captured. Finally, you can remove the unwanted part i.e "left side" from the canvas and save it as an image. try this! – Gaurav Chaudhary Mar 20 '17 at 06:47
@paulc1111 Revised my answer. Please study canvas.drawImage() parameters carefully and adjust accordingly – Gaurav Chaudhary Mar 20 '17 at 12:09
Be careful. This is not a production-ready library. I am noticing these days a lot that Stackoverflow often misleads people – bugwheels94 Jan 23 '20 at 01:40
1

OP specifically mentioned **NOT** html2canvas – Dec 24 '20 at 12:59
@expressjs123 "but that is not what I want. I think.." he thought so but he was not sure – Gaurav Chaudhary Jan 08 '21 at 11:15
html2canvas does not work for me. It trys to mimic CSS properties and re-render the items (I believe). This is a horrible solution. Are there no tools to simply screenshot an area? – jscul Apr 24 '21 at 00:50

How to take a screenshot in html with javascript?

1 Answers1

Linked