Home
code source
JavaScript

Crèer un bouton de capture d'écran avec javascript

Saviez-vous que vous pouvez prendre ou capturer des captures d'écran de n'importe quelle fenêtre à l'aide de JavaScript vanille ? Oui, il n'y a pas besoin d'une bibliothèque ou d'un plugin externe pour prendre une simple capture d'écran de la page Web ou de la fenêtre.

Cependant, dans ce blog, vous apprendrez à faire la même chose (capturer des captures d'écran) avec du JavaScript simple. Les codes et la logique derrière la prise d'une capture d'écran sont si simples que vous pouvez facilement les comprendre si vous avez des connaissances de base en JavaScript.
Pour prendre une capture d'écran, j'ai créé une page Web factice avec des titres, des paragraphes et un bouton. Lorsque l'utilisateur clique sur le bouton, une fenêtre d'invite s'affiche demandant l'autorisation de capturer une capture d'écran. Si l'utilisateur accepte l'autorisation, la page Web sera capturée et affichée sous forme d'image lightbox.

Étapes pour prendre des captures d'écran en JavaScript
Pour prendre une capture d'écran en utilisant HTML, CSS et JavaScript, suivez les étapes indiquées ligne par ligne :
1. Créez un dossier. Vous pouvez nommer ce dossier comme vous le souhaitez et y placer les fichiers répertoriés ci-dessous.
2. Créez un fichier index.html. Le nom du fichier doit être index et son extension .html
3. Créez un fichier style.css. Le nom du fichier doit être style et son extension .css
4. Créez un fichier script.js. Le nom du fichier doit être script et son extension .js

Codes Sources du projet

Code HTML 

    
        
    <!DOCTYPE html>
<!-- Rejoins notre groupe Telegram https://t.me/codingtuto -->
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Capture Écran </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 d'écran </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">Faire une capture</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>

Code CSS 

    
        /* 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%;
}

Code JavaScript 

    
const screenshotBtn = document.querySelector("#src-btn"),
screenshotPreview = document.querySelector(".src-preview"),
closeBtn = screenshotPreview.querySelector("#close-btn");

const captureScreen = async () => {
    try {
        // demander la permission d'utiliser une entrée multimédia pour enregistrer l'onglet actuel
        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");

            // passage de la largeur et de la hauteur de la vidéo en tant que largeur et hauteur de la toile
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            
            video.play(); // lire la vidéo pour que l'image dessinée ne soit ni noire ni vide
            // dessine une image du flux vidéo capturé
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            stream.getVideoTracks()[0].stop(); // terminer la première piste vidéo du flux
            
            // transmettre l'URL des données de canevas en tant que capture d'écran de prévisualisation src
            screenshotPreview.querySelector("img").src = canvas.toDataURL();
            screenshotPreview.classList.add("show");
        });
        video.srcObject = stream; // transmission de données de flux de capture en tant qu'objet source vidéo
    } catch (error) { // si l'image n'a pas pu être capturée pour une raison quelconque, alertez le message 
        alert("Impossible !");
    }
}

closeBtn.addEventListener("click", () => screenshotPreview.classList.toggle("show"));
screenshotBtn.addEventListener("click", captureScreen);

Commentaires

  • A+
  • A-