- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Can you take a screenshot of the page using HTML5 Canvas?
Html2Canvas is a JavaScript library that can take screenshot of the whole web page or specific part. It doesn’t take the screenshot but creates the view based on the page information.
Example
Below given is an example code. Here, html2canvas.js script is included at the <head>. The html2canvas() method is called. Returns the base64 value, which eventually creates image source or an image file.
<!DOCTYPE html> <html> <head> <script src="html2canvas-master/dist/html2canvas.js"></script> </head> <body> <h1>Take screenshot</h1> <div class="container" id='container' > <imgsrc='images/one.jpg' width='50' height='50'> <imgsrc='images/two.jpg' width='50' height='50'> </div> <input type='button' id='but_screenshot' value='Take screenshot' onclick='screenshot();'><br/> <script> function screenshot(){ html2canvas(document.body).then(function(canvas) { document.body.appendChild(canvas); }); } </script> </body> </html>
Advertisements
To Continue Learning Please Login
Login with Google