Skip to content

Commit 50363cc

Browse files
AsmrProg-YTAsmrProg-YT
committed
Adding Day #65
1 parent c82f394 commit 50363cc

File tree

6 files changed

+153
-1
lines changed

6 files changed

+153
-1
lines changed

‎Day #65 - Capture Screen Shot/README.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Day #65
2+
3+
### Capture Screenshot
4+
In this tutorial ([Open in Youtube](https://youtu.be/uVzwT8UOla0)), I am gonna showing to you how to take screenshot with javascript from webpage! we will use html2canvs library to take screenshots from website with javascript coding❗️
5+
6+
# Screenshot
7+
Here we have project screenshot :
8+
9+
![screenshot](screenshot.jpg)

‎Day #65 - Capture Screen Shot/index.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Day #65 - Capture Screenshot | AsmrProg</title>
9+
</head>
10+
11+
<body>
12+
13+
<div class="login-container">
14+
<form class="login-form">
15+
<h2>Login</h2>
16+
<div class="input-group">
17+
<label for="username">Username</label>
18+
<input type="text" id="username" placeholder="Enter username" required autocomplete="off">
19+
</div>
20+
<div class="input-group">
21+
<label for="password">Password</label>
22+
<input type="password" id="password" placeholder="Enter password" required>
23+
</div>
24+
<button type="submit">Login</button>
25+
</form>
26+
</div>
27+
28+
<button id="screenshotBtn">Take Screenshot</button>
29+
30+
31+
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
32+
<script src="script.js"></script>
33+
</body>
34+
35+
</html>

‎Day #65 - Capture Screen Shot/screenshot.jpg

34.2 KB
Loading

‎Day #65 - Capture Screen Shot/script.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
document.getElementById('screenshotBtn').addEventListener('click', function () {
2+
// Hide screenshot button from captured screenshot
3+
this.classList.add('hidden');
4+
5+
// Take the screenshot
6+
html2canvas(document.documentElement, {
7+
scale: window.devicePixelRatio, // Capture at the device's pixel ratio
8+
logging: true, // Enable logging for debugging
9+
useCORS: true, // Use CORS to handle cross-origin images
10+
windowHeight: window.innerHeight,
11+
windowWidth: window.innerWidth
12+
}).then(canvas => {
13+
// Create an image
14+
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
15+
16+
// Create a link to download the image
17+
var link = document.createElement('a');
18+
link.download = 'screenshot.png';
19+
link.href = image;
20+
link.click();
21+
22+
// Show the button again
23+
this.classList.remove('hidden');
24+
});
25+
26+
});

‎Day #65 - Capture Screen Shot/style.css

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
body, html{
2+
height: 100%;
3+
margin: 0;
4+
font-family: 'Arial', sans-serif;
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
background-color: #f4f4f4;
9+
}
10+
11+
.login-container{
12+
background-color: #fff;
13+
padding: 40px;
14+
border-radius: 10px;
15+
width: 320px;
16+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
17+
}
18+
19+
.login-form h2{
20+
margin-bottom: 20px;
21+
}
22+
23+
.input-group{
24+
margin-bottom: 15px;
25+
text-align: left;
26+
}
27+
28+
.input-group label{
29+
display: block;
30+
margin-bottom: 5px;
31+
}
32+
33+
.login-form input[type="text"],
34+
.login-form input[type="password"]{
35+
width: 100%;
36+
padding: 10px;
37+
border: 1px solid #ddd;
38+
border-radius: 5px;
39+
box-sizing: border-box;
40+
}
41+
42+
.login-form input[type="text"]:focus,
43+
.login-form input[type="password"]:focus{
44+
outline: none;
45+
border-color: #4caf50;
46+
}
47+
48+
.login-form button{
49+
width: 100%;
50+
padding: 10px;
51+
color: #fff;
52+
background-color: #4caf50;
53+
border: none;
54+
cursor: pointer;
55+
border-radius: 5px;
56+
font-size: 16px;
57+
transition: all 0.3s ease;
58+
}
59+
60+
.login-form button:hover,
61+
#screenshotBtn:hover{
62+
background-color: #45a049;
63+
}
64+
65+
#screenshotBtn{
66+
position: fixed;
67+
bottom: 20px;
68+
left: 50%;
69+
transform: translateX(-50%);
70+
padding: 10px 20px;
71+
background-color: #4caf50;
72+
color: #fff;
73+
border: none;
74+
border-radius: 5px;
75+
cursor: pointer;
76+
transition: all 0.3s ease;
77+
}
78+
79+
.hidden{
80+
display: none !important;
81+
}

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,9 @@ Here we have list of projects:
7474
62. Chrome ToDo Extension
7575
63. Chrome Translator Extension
7676
64. Speech To Text
77+
65. Capture Screenshot
7778

78-
## Where is rest 36 Projects
79+
## Where is rest 35 Projects
7980

8081
We create a project each 3 days with voting on our <a href="https://youtube.com/@AsmrProg" target="_blank">Youtube</a> channel.
8182
You can vote for upcoming projects on our channel **community** page :wink:

0 commit comments

Comments
 (0)