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 :

Déclenchement action sur bouton


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    Juin 2010
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Juin 2010
    Messages : 24
    Points : 16
    Points
    16
    Par défaut Déclenchement action sur bouton
    Bonjour a tous,

    J'a récupéré un script permettant de lancer la caméra de l'utilisateur et de faire une photo.
    J'aimerai que la photo prise soit enregistrée dans un dossier particulier au moment ou je clique sur le bouton "Enregistrer photo !".
    Cependant, je ne sais pas comment m'y prendre. Est ce que quelqu'un aurait'il une idée svp ?

    Voici les infos qui se trouve dans le body de mon fichier index.php :
    Code : 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
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    <body>
     
      <div id="container">
     
    <video id="player" controls autoplay></video>
    <button id="capture">Capture</button>
    <button id="enregistre">Enregistrer photo !</button>
    <canvas id="snapshot" width=320 height=240></canvas>
     
    <script>
      var player = document.getElementById('player'); 
      var snapshotCanvas = document.getElementById('snapshot');
      var captureButton = document.getElementById('capture');
      var EnregistrerButton = document.getElementById('enregistre');
     
      var handleSuccess = function(stream) {
        // Attach the video stream to the video element and autoplay.
        player.src = URL.createObjectURL(stream);
      };
     
      captureButton.addEventListener('click', function() {
        var context = snapshot.getContext('2d');
        // Draw the video frame to the canvas.
        context.drawImage(player, 0, 0, snapshotCanvas.width, snapshotCanvas.height);
      });
     
      EnregistrerButton.addEventListener('click', function() {
     
     
     
     
      }) ;
     
      navigator.mediaDevices.getUserMedia({ audio: false, video: true })
          .then(handleSuccess);
     
    </script>
     
      </div>
     
      <script src="../../../js/adapter.js"></script>
      <script src="../../../js/common.js"></script>
      <script src="js/main.js"></script>
     
      <script src="../../../js/lib/ga.js"></script>
     
    </body>
    Je ne sais pas quoi mettre dans la partie "EnregistrerButton" pour déclencher l'enregistrement de la photo qui est stocké dans la balise canvas.

    Merci d'avance pour votre aide.
    Cordialement

  2. #2
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    Juin 2010
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Juin 2010
    Messages : 24
    Points : 16
    Points
    16
    Par défaut
    Je viens de tenter ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
      EnregistrerButton.addEventListener('click', function() {
    	var dataURL = snapshot.toDataURL("image/png");
    				 $.ajax({
    						type: "post",
    						url:  "save_to_img.php",
    						data: {'img_data' : dataURL },
    						success: function(data){
    								alert('Enregistrement effectué !');
    						}
    				}); 
      }) ;
    mais j'ai une erreur au niveau du $.ajax : "$ is not defined"

    Est ce que quelqu'un aurait-il une idée svp ?

    Merci d'avance
    Cordialement,

  3. #3
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    Juin 2010
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Juin 2010
    Messages : 24
    Points : 16
    Points
    16
    Par défaut
    Voici le fichier qui fonctionne :
    Code : 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
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    <html>
    <head>
     
      <base target="_blank">
     
      <title>Prendre une photo</title>
     
     
     
    </head>
     
    <body>
     
      <div id="container">
     
      <script src="js/jquery-1.11.0.min.js"></script>
     
    <video id="player" controls autoplay></video>
    <button id="capture">Capture</button>
    <button id="enregistre">Enregistrer photo !</button>
    <canvas id="snapshot" width=320 height=240></canvas>
     
    <script>
      var player = document.getElementById('player'); 
      var snapshotCanvas = document.getElementById('snapshot');
      var captureButton = document.getElementById('capture');
      var EnregistrerButton = document.getElementById('enregistre');
     
      var handleSuccess = function(stream) {
        // Attach the video stream to the video element and autoplay.
        player.src = URL.createObjectURL(stream);
      };
     
      captureButton.addEventListener('click', function() {
        var context = snapshot.getContext('2d');
        context.drawImage(player, 0, 0, snapshotCanvas.width, snapshotCanvas.height);
      });
     
     
      EnregistrerButton.addEventListener('click', function() {
    	var dataURL = snapshot.toDataURL("image/png");
    				 $.ajax({
    						type: "post",
    						url:  "save_to_img.php",
    						data: {'img_data' : dataURL },
    						success: function(data){
    								alert('Enregistrement effectué !');
    						}
    				}); 
      });
     
      navigator.mediaDevices.getUserMedia({ audio: false, video: true })
          .then(handleSuccess);
    </script>
     
      </div>
     
    </body>
    </html>
    Il manquait le lien vers le fichier JS pour que le $ soit interprété correctement !

    Ciao

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Action sur bouton
    Par betizy dans le forum Flash
    Réponses: 4
    Dernier message: 15/11/2007, 17h02
  2. action sur bouton de commande
    Par okuspokus dans le forum Macros et VBA Excel
    Réponses: 15
    Dernier message: 07/06/2007, 15h23
  3. [FLASH 8] Action sur boutons
    Par jack21 dans le forum Flash
    Réponses: 3
    Dernier message: 04/12/2006, 21h30
  4. [FLASH MX2004 PRO] PB actions sur Boutons
    Par Mug13 dans le forum Flash
    Réponses: 7
    Dernier message: 01/03/2006, 13h54
  5. Action sur bouton de commande
    Par uloaccess dans le forum Access
    Réponses: 3
    Dernier message: 16/11/2005, 16h53

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