Code source : Un script de capture d'écran avec JavaScript.aa
314
0
Mukaz
Jan,01,1970
Hey les geeks j'espère que vous allez bien, dans cet article, nous allons nous intéresser à un script de capture d'écran avec JavaScript. Nous allons voir comment cela fonctionne et comment vous pouvez l'utiliser pour capturer des images de vos pages web.
Le script de capture d'écran avec JavaScript est relativement simple à mettre en place et utiliser. Voici les différentes étapes à suivre pour réaliser ce script :
1. Tout d'abord, nous allons mettre en place la structure HTML de base.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Take Screenshots With Javascript</title>
<!-- HTML2CANVAS -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"
integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylsheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div id="container">
<h1>Boats</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione
aperiam aut delectus adipisci quam ipsa exercitationem explicabo
quaerat nemo! Voluptates iure dolores voluptate. Delectus sed ipsum
placeat corrupti cumque exercitationem.
</p>
<img src="demo-img.jpg" />
</div>
<div id="preview-container"></div>
</div>
<div class="buttons">
<button id="capture-button">Capture Screenshot</button>
<a id="download-button" class="hide">Download Screenshot</a>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
2. Ensuite, nous utiliserons le CSS pour mettre un peu de l'ordre visuel.
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
padding: 1em;
background-color: #0075ff;
}
.wrapper {
font-family: "Poppins", sans-serif;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
}
.wrapper img {
max-width: 60%;
//height: 100px;
}
#container,
#preview-container {
background-color: #ffffff;
border-radius: 0.8em;
padding: 1em;
}
#container p {
font-size: 0.8em;
color: #606060;
text-align: justify;
}
.buttons {
display: flex;
justify-content: center;
gap: 1em;
margin-top: 1em;
}
button,
a {
font-family: "Poppins", sans-serif;
font-size: 1em;
background-color: #ffffff;
border: none;
outline: none;
padding: 1em 2em;
cursor: pointer;
border-radius: 0.5em;
color: #000000;
text-decoration: none;
}
.hide {
display: none;
}
3. Enfin la partie là plus essentielle du script, nous allons ajouter le code de capture d'écran.Pour se faire nous utiliserons JavaScript.
JavaScript
const container = document.getElementById("container");
const captureButton = document.getElementById("capture-button");
const previewContainer = document.getElementById("preview-container");
const downloadButton = document.getElementById("download-button");
captureButton.addEventListener("click", async () => {
downloadButton.classList.remove("hide");
const canvas = await html2canvas(container);
const imageURL = canvas.toDataURL();
previewContainer.innerHTML = `
`;
downloadButton.href = imageURL;
downloadButton.download = "image.png";
});
window.onload = () => {
downloadButton.classList.add("hide");
previewContainer.innerHTML = "";
};
Ce script de capture d'écran avec JavaScript est un outil utile pour les développeurs web qui souhaitent capturer des images de leurs pages web. Il est relativement simple à mettre en place et utiliser et peut être intégré facilement dans un projet web. N'hésitez pas à l'essayer et à l'adapter à vos besoins🙃🙃A la prochaine.
