IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Capture d'écran en Javascript


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club Avatar de chatofor
    Profil pro
    Inscrit en
    Août 2009
    Messages
    59
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 59
    Points : 25
    Points
    25
    Par défaut Capture d'écran en Javascript
    Bonjour,

    Avant toute chose je dois vous dire que je ne connais quasi rien au javascript, je n'ai que des notions de base (variables, etc), je l'étudie en ce moment.

    Mais j'ai un petit projet qui nécessite l'usage d'un script Javascript, c'est : http://html2canvas.hertzen.com/

    Il permet de faire un screenshot d'une page web.

    J'ai plus ou moins réussi à l'utiliser mais je coince dès lors qu'il s'agit de modifier moi même le code, exemple :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-alpha.12/html2canvas.min.js"></script>
    <script>
    window.addEventListener("load" , function (){
      html2canvas(document.querySelector('h1').innerHTML;).then(function(canvas) {
        data = canvas.toDataURL();
        image = document.createElement('img');
        image.src = data;
        image.style.width = "500px";
        image.style.height = "auto";
        // After you are done styling it, append it to the BODY element
        document.body.appendChild(image);
      });
    });
    </script>
    </head>
    <body>
     
    	<?php
            
            $fichier = file_get_contents('https://javascript/cours-complet/javascript-acceder-element-html.php');
            echo nl2br(htmlspecialchars($fichier));
            ?>
     
      <p id="p1">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
      <p id="p2">Je veux juste cette partie de la page.</p>
    </body>
    </html>

    J'ai essayé ceci en pensant que ça allait me créer une image représentant le titre H1 de la page captée par file get contents de PHP, mais je n'ai aucun résultat.

    Auriez vous la possibilité de m'aider svp ?

  2. #2
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 873
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 873
    Points : 3 717
    Points
    3 717
    Par défaut
    Salut,

    Je ne connais pas cette librairie mais si tu regardes l'exemple sur leur site on comprend que la fonction html2canvas() est censée recevoir en paramètre un élément du DOM or toi tu as écrit :

    html2canvas(document.querySelector('h1').innerHTML;).then(function(canvas)...

    1- Déjà je ne vois pas de balise <h1> dans ton html
    2- Et même si il y en avait une ce n'est pas cet élément que tu passes en paramètre mais son "innerHTML".
    3- Essaye ça par exemple : html2canvas(document.getElementById("p1")).then(function(canvas)...

    J'ai testé ici : https://jsbin.com/litamivuxu/edit?html,output et cela affiche bien ton image...

    EDIT : Ah oui ta balise <h1> est censée être ajoutée au DOM par le code PHP ??? Je ne connais pas le PHP mais en tous cas le deuxième point ci-dessus reste valable : il faut enlever le ".innerHTML"...

    Tu devrais d'abord essayer sans PHP comme l'exemple ci-dessus pour t'assurer que tu utilises bien la fonction...

  3. #3
    Membre régulier
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2016
    Messages
    93
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2016
    Messages : 93
    Points : 95
    Points
    95
    Par défaut Prendre une capture du noeud
    J'ai essayé la librairie html2canvas, mais elle ne cadre pas correctement l'élément passé en paramètre.
    Au final, l'image obtenue contient des zones blanches. L'élément screenshoté est décalé.

    Par contre, j'ai été impressionné par la fonction Prendre une "capture du nœud" de Firefox 109.0.1
    Sur la page web: clic droit / inspecter l'élément.

    Une fois la console ouverte: clic droit sur la balise HTML / prendre une capture du nœud.
    L'image tombe dans le répertoire des téléchargements.

    Aussi, je me demande s'il n'existerait pas une instruction JavaScript, qui permettrait de capturer un élément HTML dans une image.
    En mieux qu'html2canvas.

    JavaScript évolue sans cesse. Si ça n'existe pas encore, à mon avis, ça ne devrait pas tarder.
    Quelqu'un connaîtrait-il une instruction JS, du style
    élément.capturer(résolution);
    Qui déclencherait la fonction Firefox de prise d'une capture du nœud ?

    Permettant d'obtenir un screenshot de l'élément, dans la résolution demandée.
    Ça éviterait de trimballer 36 librairies dans le projet.

    Merci.
    Christian.

Discussions similaires

  1. capturer une zone d'écran en javascript
    Par calitom dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 18/03/2009, 15h05
  2. Pb capture d'écran et msgbox
    Par PRACH dans le forum VB 6 et antérieur
    Réponses: 12
    Dernier message: 03/01/2006, 09h38
  3. Capture d'écran
    Par lildan dans le forum MFC
    Réponses: 1
    Dernier message: 14/11/2005, 14h26
  4. Réponses: 10
    Dernier message: 10/10/2003, 14h25

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo