Hey friends,
Let's see how to capture a screenshot of a webpage with a click of a button on your website using Javascript. This is useful for users of your website to instantly capture the visual contents of your website as a jpg screenshot
Do check out the video tutorial of this project on my YouTube channel and do subscribe to support me! Thanks!
<!-- Created by CodingPorium,2025. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Capture Basic Screenshot with JS</title>
<!-- html2canvas library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<style>
/*Import Poppins Font*/
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
/*CSS Reset*/
*{
padding:0;
margin:0;
box-sizing:border-box;
}
::selection{
background-color:#ff085a;
color:white;
}
body{
background-color:#ff085a;
color:black;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
font-family:poppins;
font-size:20px;
}
a{
text-decoration:none;
}
.container{
width:90%;
max-width:500px;
margin:0 auto;
background-color:white;
border-radius:10px;
padding:1rem;
display:flex;
flex-direction:column;
}
button{
font-family:poppins;
font-size:20px;
background-color: #ff085a;
color:white;
padding:16px 20px;
border-radius: 8px;
border:none;
cursor:pointer;
width:100%;
margin-bottom: 10px;
opacity: 0.8;
transition: 0.3s;
}
button:hover{
opacity:0.6;
}
</style>
<body>
<!--HTML Codes-->
<div class="container">
<h1>Welcome to CodingPorium</h1>
<p>Welcome to the channel. Do subscribe to our YouTube channel at
<a href="https://youtube.com/c/codingporium">YouTube</a> and check out our blog and Instagram
at <a href="https://codingporium.blogspot.com">codingporium.blogspot.com</a> for more!</p>
<br>
<p>Click the button below to capure a
<strong>screenshot</strong>
of this page.
</p>
<br>
<button>Screenshot & Download</button>
<br>
</div>
<!--JS Codes-->
<script>
const screenshot = document.querySelector("body"),
snaps = document.querySelectorAll("button");
snaps.forEach(snap => {
// Adding Event to all buttons
snap.addEventListener("click", () => {
// Create canvas of element with html2canvas library imported
html2canvas(screenshot).then(canvas => {
// Download Screenshot
const a = document.createElement("a");
a.href = canvas.toDataURL();
a.download = "screenshot.jpg";
a.click();
});
});
});
</script>
</body>
</html>
Thanks for reading, do subscribe our YouTube channel to support us in providing more awesome projects with free source code!
Post a Comment