Skip to main content

How to take screenshot of a div in HTML through jQuery ?

If you just want to have screenshot of a div, you can do it like this

Use html2canvas library click here


Here is a code to take a screenshot of div






<!DOCTYPE html>
<html>
<head>
<title>Take Screen Shot</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
</head>
<body>
<div id="screenshot">
<h1>Take a screenshot of that div</h1>
Hello World......
</div>
<button onclick="screenshot()">Make Screen Shot</button>
<div id="mycanvas"></div>
<script type="text/javascript">
function screenshot() {
  var element = document.getElementById('screenshot');
  window.scrollTo(0,0);
  html2canvas(element, {
    width: 1200,
    height: 2000,
   onrendered:function(canvas) {
    canvas.setAttribute("id", "mycanvas");
    var dataURL = canvas.toDataURL("image/png");
    //console.log(dataURL);
    window.open(dataURL);
    
  }
});
}
</script>
</body>
</html>


Here is a screen shot




For more information Click Here

Comments

Post a Comment

Popular posts from this blog

The Latest Technologies in Web Development

In modern world a   multiple development technologies since our inception; staying at par with the latest trends and demands of the web development industry.  New web technologies emerge every day.   These new technologies offer a lot of opportunities to entrepreneurs who want to engage more users and stay competitive in the market. 1. Progressive web applications A PWA is an application that works as a website with an almost full native mobile app experience. It runs independently of the browser and interacts with the customer as a native application.  Reduced development and support costs; ·          Quicker launch to the market. ·          Easier distribution. ·          Smooth installation. ·          Saving device power and storage. ·          Seamless maintenance a...
Post a Comment
Read more

Today’s technology trends .

  Today’s technology is a booming market full of exciting and innovative products and new learning opportunities. With technology as a major consumer of our time and also an exciting experience in our world today, are you motivated to generate something new. For example- Recent developments in the field of digitalization and artificial intelligence make increasingly autonomous technology possible. Many developments and implementations of autonomous technology are ongoing in fields such as industrial production, autonomous driving, and care robots. As soon as this technology, e.g., an autonomous robot, is able to behave independently in an unknown environment, to learn, and to behave similarly to living organisms, in particular humans in some respect, new debates around responsibility, human–machine interface, control, and the moral status of the robots emerge, as can already be witnessed. The question whether and in what respect these technologies could be considered as some form o...
Post a Comment
Read more