• ;
  • A Coding Boy
  • Blog
  • Videos
  • Projects
  • Home
HTML AND CSS
LOGIN PAGE
WEBSITE DESGIN
API PROJECTS
CARD DESGIN
JAVASCRIPTS GAMES
JAVASCRIPT PROJECTS
JAVA PROJECTS
PYTHON PROJECTS
demo post
only for demo nasa prospect
only for demo the gonnies
most popular
how to create parallax website
how to create a beautiful card
how to create a netflix login page
how to create flipping ui card
how to create image generator website
How to Take Simple Screenshot in Vanilla JavaScript
Did you know you can take or capture screenshots of any window using vanilla JavaScript? Yes, there’s no need for an external library or plugin to take a simple screenshot of the web page or window.
To take a screenshot, I’ve created a dummy web page with some headings, paragraphs, and a button. When the user clicks on the button, a prompt window will be shown asking for permission to capture a screenshot. If the user accepts the permission, the webpage will be screenshotted and shown as an image lightbox.
Steps for Taking Screenshots in JavaScript
To take a screenshot using HTML, CSS, and JavaScript, follow the given steps line by line:
1. Create a folder. You can name this folder whatever you want and put the files listed below inside it.
2. Create an index.html file. The file name must be index and its extension .html
3. Create a style.css file. The file name must be style and its extension .css
4. Create a script.js file. The file name must be script and its extension .js
First, paste the following codes into your index.html file.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Capture Screenshots with JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Font Awesome CDN Link for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<script src="script.js" defer></script>
</head>
<body>
<h1>Capture Screenshots with JavaScript</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur deserunt exercitationem quidem, voluptate amet eius. Consequuntur obcaecati ab provident, a eveniet facilis optio dolore, ut nesciunt eaque quo tenetur similique atque voluptatibus nihil nobis facere! Recusandae totam voluptates alias eveniet perspiciatis molestias voluptatibus mollitia quaerat, doloremque dolor exercitationem, nulla delectus vero vel nihil commodi error temporibus ullam dolorem repellendus adipisci?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem blanditiis aut laboriosam perspiciatis assumenda, obcaecati esse iste! Consequuntur quam cupiditate rerum quidem neque aperiam, totam iure fugit ipsam inventore debitis quod laudantium perspiciatis ea quibusdam corporis autem ullam voluptatem. Iure nam repellendus magni assumenda, ipsa soluta facere, accusamus, possimus ab quia atque provident hic repellat. Ipsa in possimus aperiam ut, eum doloribus accusamus, excepturi, vel earum cumque atque nulla a?</p>
<h2>Dummy heading two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore consectetur maxime eum tenetur laborum delectus necessitatibus expedita dolores perferendis saepe praesentium nostrum voluptatibus porro exercitationem ipsa maiores, veniam deleniti qui dolorum, non commodi nihil magni, tempora dicta! Facilis ducimus nam consectetur exercitationem molestias labore aspernatur repellendus itaque aliquid, esse totam ipsum. Consequuntur culpa magnam obcaecati odit reprehenderit, voluptatem iste tempore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore consectetur maxime eum tenetur laborum delectus necessitatibus expedita dolores perferendis saepe praesentium nostrum voluptatibus porro exercitationem ipsa maiores, veniam deleniti qui dolorum, non commodi nihil magni, tempora dicta! Facilis ducimus nam consectetur exercitationem molestias labore aspernatur repellendus itaque aliquid, esse totam ipsum. Consequuntur culpa magnam obcaecati odit reprehenderit, voluptatem iste tempore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore consectetur maxime eum tenetur laborum delectus necessitatibus expedita dolores perferendis saepe praesentium nostrum voluptatibus porro exercitationem ipsa maiores, veniam deleniti qui dolorum, non commodi nihil magni, tempora dicta! Facilis ducimus nam consectetur exercitationem molestias labore aspernatur repellendus itaque aliquid, esse totam ipsum. Consequuntur culpa magnam obcaecati odit reprehenderit, voluptatem iste tempore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore consectetur maxime eum tenetur laborum delectus necessitatibus expedita dolores perferendis saepe praesentium nostrum voluptatibus porro exercitationem ipsa maiores, veniam deleniti qui dolorum, non commodi nihil magni, tempora dicta! Facilis ducimus nam consectetur exercitationem molestias labore aspernatur repellendus itaque aliquid, esse totam ipsum. Consequuntur culpa magnam obcaecati odit reprehenderit, voluptatem iste tempore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore consectetur maxime eum tenetur laborum delectus necessitatibus expedita dolores perferendis saepe praesentium nostrum voluptatibus porro exercitationem ipsa maiores, veniam deleniti qui dolorum, non commodi nihil magni, tempora dicta! Facilis ducimus nam consectetur exercitationem molestias labore aspernatur repellendus itaque aliquid, esse totam ipsum. Consequuntur culpa magnam obcaecati odit reprehenderit, voluptatem iste tempore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore consectetur maxime eum tenetur laborum delectus necessitatibus expedita dolores perferendis saepe praesentium nostrum voluptatibus porro exercitationem ipsa maiores, veniam deleniti qui dolorum, non commodi nihil magni, tempora dicta! Facilis ducimus nam consectetur exercitationem molestias labore aspernatur repellendus itaque aliquid, esse totam ipsum. Consequuntur culpa magnam obcaecati odit reprehenderit, voluptatem iste tempore.</p>
<button id="src-btn">Capture Screenshot</button>
<div class="src-preview">
<div class="screenshot">
<i id="close-btn" class="fa-solid fa-xmark"></i>
<img src="" alt="screenshot">
</div>
</div>
</body>
</html>
<!DOCTYPE html> <!-- Coding By CodingNepal - youtube.com/codingnepal --> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Capture Screenshots with JavaScript | CodingNepal</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Font Awesome CDN Link for Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"> <script src="script.js" defer></script> </head> <body> <h1>Capture Screenshots with JavaScript</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur deserunt exercitationem quidem, voluptate amet eius. Consequuntur obcaecati ab provident, a eveniet facilis optio dolore, ut nesciunt eaque quo tenetur similique atque voluptatibus nihil nobis facere! Recusandae totam voluptates alias eveniet perspiciatis molestias voluptatibus mollitia quaerat, doloremque dolor exercitationem, nulla delectus vero vel nihil commodi error temporibus ullam dolorem repellendus adipisci?</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem blanditiis aut laboriosam perspiciatis assumenda, obcaecati esse iste! Consequuntur quam cupiditate rerum quidem neque aperiam, totam iure fugit ipsam inventore debitis quod laudantium perspiciatis ea quibusdam corporis autem ullam voluptatem. Iure nam repellendus magni assumenda, ipsa soluta facere, accusamus, possimus ab quia atque provident hic repellat. Ipsa in possimus aperiam ut, eum doloribus accusamus, excepturi, vel earum cumque atque nulla a?</p> <h2>Dummy heading two</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore consectetur maxime eum tenetur laborum delectus necessitatibus expedita dolores perferendis saepe praesentium nostrum voluptatibus porro exercitationem ipsa maiores, veniam deleniti qui dolorum, non commodi nihil magni, tempora dicta! Facilis ducimus nam consectetur exercitationem molestias labore aspernatur repellendus itaque aliquid, esse totam ipsum. Consequuntur culpa magnam obcaecati odit reprehenderit, voluptatem iste tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore consectetur maxime eum tenetur laborum delectus necessitatibus expedita dolores perferendis saepe praesentium nostrum voluptatibus porro exercitationem ipsa maiores, veniam deleniti qui dolorum, non commodi nihil magni, tempora dicta! Facilis ducimus nam consectetur exercitationem molestias labore aspernatur repellendus itaque aliquid, esse totam ipsum. Consequuntur culpa magnam obcaecati odit reprehenderit, voluptatem iste tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore consectetur maxime eum tenetur laborum delectus necessitatibus expedita dolores perferendis saepe praesentium nostrum voluptatibus porro exercitationem ipsa maiores, veniam deleniti qui dolorum, non commodi nihil magni, tempora dicta! Facilis ducimus nam consectetur exercitationem molestias labore aspernatur repellendus itaque aliquid, esse totam ipsum. Consequuntur culpa magnam obcaecati odit reprehenderit, voluptatem iste tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore consectetur maxime eum tenetur laborum delectus necessitatibus expedita dolores perferendis saepe praesentium nostrum voluptatibus porro exercitationem ipsa maiores, veniam deleniti qui dolorum, non commodi nihil magni, tempora dicta! Facilis ducimus nam consectetur exercitationem molestias labore aspernatur repellendus itaque aliquid, esse totam ipsum. Consequuntur culpa magnam obcaecati odit reprehenderit, voluptatem iste tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore consectetur maxime eum tenetur laborum delectus necessitatibus expedita dolores perferendis saepe praesentium nostrum voluptatibus porro exercitationem ipsa maiores, veniam deleniti qui dolorum, non commodi nihil magni, tempora dicta! Facilis ducimus nam consectetur exercitationem molestias labore aspernatur repellendus itaque aliquid, esse totam ipsum. Consequuntur culpa magnam obcaecati odit reprehenderit, voluptatem iste tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore consectetur maxime eum tenetur laborum delectus necessitatibus expedita dolores perferendis saepe praesentium nostrum voluptatibus porro exercitationem ipsa maiores, veniam deleniti qui dolorum, non commodi nihil magni, tempora dicta! Facilis ducimus nam consectetur exercitationem molestias labore aspernatur repellendus itaque aliquid, esse totam ipsum. Consequuntur culpa magnam obcaecati odit reprehenderit, voluptatem iste tempore.</p> <button id="src-btn">Capture Screenshot</button> <div class="src-preview"> <div class="screenshot"> <i id="close-btn" class="fa-solid fa-xmark"></i> <img src="" alt="screenshot"> </div> </div> </body> </html>
Second, paste the following codes into your style.css file.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
font-family: 'Poppins', sans-serif;
}
body {
padding: 0 30px;
}
#src-btn, .screenshot {
position: fixed;
left: 50%;
transform: translate(-50%, -50%);
}
#src-btn {
bottom: 15px;
border: none;
outline: none;
color: #fff;
cursor: pointer;
font-size: 1rem;
padding: 15px 25px;
border-radius: 30px;
background: #4a98f7;
}
.src-preview {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
pointer-events: none;
background: rgba(0,0,0,0.65);
transition: all 0.15s ease;
}
.src-preview.show {
opacity: 1;
pointer-events: auto;
}
.src-preview .screenshot {
width: 70%;
top: 50%;
opacity: 0;
pointer-events: none;
aspect-ratio: 16 / 9;
transition: transform 0.15s ease;
transform: translate(-50%, -50%) scale(0.9);
}
.src-preview.show .screenshot{
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}
.screenshot #close-btn {
position: absolute;
right: -25px;
color: #fff;
cursor: pointer;
font-size: 1.1rem;
}
.screenshot img {
width: 100%;
}
/* Import Google font - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); * { font-family: 'Poppins', sans-serif; } body { padding: 0 30px; } #src-btn, .screenshot { position: fixed; left: 50%; transform: translate(-50%, -50%); } #src-btn { bottom: 15px; border: none; outline: none; color: #fff; cursor: pointer; font-size: 1rem; padding: 15px 25px; border-radius: 30px; background: #4a98f7; } .src-preview { position: fixed; left: 0; top: 0; height: 100%; width: 100%; opacity: 0; pointer-events: none; background: rgba(0,0,0,0.65); transition: all 0.15s ease; } .src-preview.show { opacity: 1; pointer-events: auto; } .src-preview .screenshot { width: 70%; top: 50%; opacity: 0; pointer-events: none; aspect-ratio: 16 / 9; transition: transform 0.15s ease; transform: translate(-50%, -50%) scale(0.9); } .src-preview.show .screenshot{ opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .screenshot #close-btn { position: absolute; right: -25px; color: #fff; cursor: pointer; font-size: 1.1rem; } .screenshot img { width: 100%; }
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
const screenshotBtn = document.querySelector("#src-btn"),
screenshotPreview = document.querySelector(".src-preview"),
closeBtn = screenshotPreview.querySelector("#close-btn");
const captureScreen = async () => {
try {
// asking permission to use a media input to record current tab
const stream = await navigator.mediaDevices.getDisplayMedia({ preferCurrentTab: true });
const video = document.createElement("video");
video.addEventListener("loadedmetadata", () => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
// passing video width & height as canvas width & height
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
video.play(); // playing the video so the drawn image won't be black or blank
// drawing an image of the captured video stream
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
stream.getVideoTracks()[0].stop(); // terminating first video track of the stream
// passing canvas data url as screenshot preview src
screenshotPreview.querySelector("img").src = canvas.toDataURL();
screenshotPreview.classList.add("show");
});
video.srcObject = stream; // passing capture stream data as video source object
} catch (error) { // if image couldn't capture by any reason, then alert the msg
alert("Failed to capture screenshot!");
}
}
closeBtn.addEventListener("click", () => screenshotPreview.classList.toggle("show"));
screenshotBtn.addEventListener("click", captureScreen);
const screenshotBtn = document.querySelector("#src-btn"), screenshotPreview = document.querySelector(".src-preview"), closeBtn = screenshotPreview.querySelector("#close-btn"); const captureScreen = async () => { try { // asking permission to use a media input to record current tab const stream = await navigator.mediaDevices.getDisplayMedia({ preferCurrentTab: true }); const video = document.createElement("video"); video.addEventListener("loadedmetadata", () => { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); // passing video width & height as canvas width & height canvas.width = video.videoWidth; canvas.height = video.videoHeight; video.play(); // playing the video so the drawn image won't be black or blank // drawing an image of the captured video stream ctx.drawImage(video, 0, 0, canvas.width, canvas.height); stream.getVideoTracks()[0].stop(); // terminating first video track of the stream // passing canvas data url as screenshot preview src screenshotPreview.querySelector("img").src = canvas.toDataURL(); screenshotPreview.classList.add("show"); }); video.srcObject = stream; // passing capture stream data as video source object } catch (error) { // if image couldn't capture by any reason, then alert the msg alert("Failed to capture screenshot!"); } } closeBtn.addEventListener("click", () => screenshotPreview.classList.toggle("show")); screenshotBtn.addEventListener("click", captureScreen);
That’s all; now you’re ready to Take Screenshots in HTML CSS, and JavaScript. If your code doesn’t work or you’ve faced any problems, you can download the source code files for this project from the given download button. It’s free, and a zip file will be downloaded that contains the project folder with source code files.
live demo
Download files
Info
Home
Projects
Blogs
Videos
About us
Follow us for more!
© 2023 All Rights Reserved A Coding Boy

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glassmorphism Login Form | CodingNepal</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <form action="#"> <h2>Login</h2> <div class="input-field"> <input type="text" required> <label>Enter your email</label> </div> <div class="input-field"> <input type="password" required> <label>Enter your password</label> </div> <div class="forget"> <label for="remember"> <input type="checkbox" id="remember"> <p>Remember me</p> </label> <a href="#">Forgot password?</a> </div> <button type="submit">Log In</button> <div class="register"> <p>Don't have an account? <a href="#">Register</a></p> </div> </form> </div> </body> </html>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; padding: 0 10px; } body::before { content: ""; position: absolute; width: 100%; height: 100%; background: url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg"), #000; background-position: center; background-size: cover; } .wrapper { width: 400px; border-radius: 8px; padding: 30px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } form { display: flex; flex-direction: column; } h2 { font-size: 2rem; margin-bottom: 20px; color: #fff; } .input-field { position: relative; border-bottom: 2px solid #ccc; margin: 15px 0; } .input-field label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: #fff; font-size: 16px; pointer-events: none; transition: 0.15s ease; } .input-field input { width: 100%; height: 40px; background: transparent; border: none; outline: none; font-size: 16px; color: #fff; } .input-field input:focus~label, .input-field input:valid~label { font-size: 0.8rem; top: 10px; transform: translateY(-120%); } .forget { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 35px 0; color: #fff; } #remember { accent-color: #fff; } .forget label { display: flex; align-items: center; } .forget label p { margin-left: 8px; } .wrapper a { color: #efefef; text-decoration: none; } .wrapper a:hover { text-decoration: underline; } button { background: #fff; color: #000; font-weight: 600; border: none; padding: 12px 20px; cursor: pointer; border-radius: 3px; font-size: 16px; border: 2px solid transparent; transition: 0.3s ease; } button:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.15); } .register { text-align: center; margin-top: 30px; color: #fff;}