Take a Simple Screenshot with JavaScript
Did you realize you can take or catch screen captures of any window utilizing vanilla JavaScript? Indeed, there's no requirement for an outer library or module to take a basic screen capture of the website page or window.
To take a screen capture, I've made a spurious page for certain headings, passages, and a button. At the point when the client taps on the button, the screen capture will caught.
Take a Simple Screenshot with JavaScript | Video Tutorial
Take a Simple Screenshot with JavaScript [Source Codes]
To take a Simple Screenshot with JavaScript follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then download the source code.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Simple Screenshot</title>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="content">
- <h2>About Us</h2>
- <p>Welcome to our website! We are a team dedicated to providing excellent services. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur dui vel nisi gravida, eget venenatis dui ultrices. Nulla facilisi. Sed elementum sem vitae nunc efficitur, a convallis lacus efficitur.</p>
-
- <p>Our goal is to deliver high-quality products and services. Fusce ultrices quam vitae mi efficitur, nec commodo nunc dapibus. Phasellus et eros sed lacus cursus ultrices eget vel leo.</p>
-
- <p>Feel free to explore our website and learn more about what we offer!</p>
- </div>
- <button onclick="takeScreenshot()">
- <i class="fas fa-camera"></i> Take Screenshot
- </button>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
- <script src="script.js"></script>
- </body>
- </html>
Now paste the following codes into your style.css file
- body {
- font-family: Arial, sans-serif;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- height: 100vh;
- margin: 0;
- background-color: #f5f5f5;
- }
-
- button {
- padding: 10px 20px;
- font-size: 16px;
- background-color: #4CAF50;
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- transition: background-color 0.3s;
- margin-bottom: 20px;
- }
-
- button:hover {
- background-color: #45a049;
- }
-
- .content {
- max-width: 600px;
- text-align: center;
- }
-
- h2 {
- color: #333;
- margin-bottom: 15px;
- }
-
- p {
- line-height: 1.6;
- color: #666;
- margin-bottom: 15px;
- }
-
Now paste the following codes into your script.js file
- function takeScreenshot() {
- const body = document.body;
- html2canvas(body).then(canvas => {
- // Convert the canvas to an image
- const img = new Image();
- img.src = canvas.toDataURL('image/png');
-
- // Open a new window and display the image
- const newWindow = window.open();
- newWindow.document.write('<img src="' + img.src + '" style="max-width: 100%; height: auto;">');
- });
- }
-
If you face any difficulties while creating Simple Screenshot with JavaScript or your code is not working as expected, you can download the source code files for this Screenshot free by clicking on the download button.