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

Langage PHP Discussion :

Sauvegarder un canvas dans une image


Sujet :

Langage PHP

  1. #1
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Juillet 2007
    Messages
    85
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juillet 2007
    Messages : 85
    Points : 54
    Points
    54
    Par défaut Sauvegarder un canvas dans une image
    Bonsoir à tout le monde,

    J'ai un petit problème depuis 2 jours et j'espère que vous pourrez m'aider.
    J'ai un formulaire et on m'a demander de pouvoir mettre une signature dans un canvas.
    Le canvas j'ai réussi a le faire (en regardant des exemples sur le net), du coup ils peuvent signer, ça c'est Ok.
    Mais par contre je n'arrive pas à enregistrer l'image sur mon serveur.
    Je développe tout en local.

    le code de mon canvas dans mon fichier index.php:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <canvas id="canvas" width="300" height="200" style="border:1px solid #000000;"></canvas>
                                         <div class="gui">
                      <input type="color" id="color" value="#FFFFF">
                      <button id="bt-clear">Clean</button> 
                      <button id="bt-save">Enregistrer la saignature</button>
    .....
    <script src="script.js"></script>
    le code de mon fichier script.js
    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
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    var aplicacionweb = aplicacionweb || {};
     
    aplicacionweb.savePNGs = (function() {
      var mousePressed = false;
      var lastX, lastY;
      var ctx;
     
      function init() {
        // init canvas
        var canvas = document.getElementById('canvas');
        ctx = canvas.getContext('2d');
        resetCanvas();
     
        // button events
        document.getElementById('bt-save').onmouseup = sendToServer;
        document.getElementById('bt-clear').onmouseup = resetCanvas;
     
        // canvas events
        canvas.onmousedown = function(e) {
          draw(e.layerX, e.layerY);
          mousePressed = true;
        };
     
        canvas.onmousemove = function(e) {
          if (mousePressed) {
            draw(e.layerX, e.layerY);
          }
        };
     
        canvas.onmouseup = function(e) {
          mousePressed = false;
        };
     
        canvas.onmouseleave = function(e) {
          mousePressed = false;
        };
      }
     
      function draw(x, y) {
        if (mousePressed) {
          ctx.beginPath();
          ctx.strokeStyle = document.getElementById('color').value;
          ctx.lineWidth = 1;
          ctx.lineJoin = 'round';
          ctx.moveTo(lastX, lastY);
          ctx.lineTo(x, y);
          ctx.closePath();
          ctx.stroke();
        }
        lastX = x; lastY = y;
      }
     
    function sendToServer() {
        var data = canvas.toDataURL('canvas');
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
          // request complete
          if (xhr.readyState == 4) {
               window.open("signature/"+xhr.responseText,'_blank');
          }
        }
        xhr.open('POST','error.php',true);
        xhr.setRequestHeader('Content-Type', 'application/upload');
        xhr.send(data);
      }
     
    function resetCanvas() {
        // just repaint canvas white
        ctx.fillStyle = '#EEEEEE';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
      }
     
      return {
        'init': init
      };
    });
     
     
    window.onload = function() {
      new aplicacionweb.savePNGs().init();
    };
    J'aimerai bien pouvoir enregistrer l'image en tant que XXX.jpg dans un répertoire par exemple "signature".

    Merci de votre aide, je suis complètement perdu.

    David

  2. #2
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    251
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 251
    Points : 383
    Points
    383
    Par défaut
    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
     
    function sendToServer() {
        var data = canvas.toDataURL();
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
          // request complete
          if (xhr.readyState == 4) {
              window.open("signature/"+xhr.responseText,'_blank');
          }
        }
     
    	xhr.open('POST','error.php',true);
    	xhr.setRequestHeader('Content-type","application/x-www-form-urlencoded');
    	xhr.send('imageCanvas=' + data);
      }
    J'ai remplacé ton application/upload par application/x-www-form-urlencoded

    Du coup au niveau d'error.php tu récupère un tableau $_POST['imageCanvas'] = data:image/png;base64,HJHJHJHJHJN.....

    De là, il faut virer ce qui est avant la virgule, replacer les espaces par des + , base64_decode puis fwrite en mode binaire et ca devrait être good

  3. #3
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Juillet 2007
    Messages
    85
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juillet 2007
    Messages : 85
    Points : 54
    Points
    54
    Par défaut
    Merci de ta réponse,

    mais je ne vois pas se que tu veux dire.
    Tu peux me mettre un exemple SVP?

    Merci encore

    David

  4. #4
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    251
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 251
    Points : 383
    Points
    383
    Par défaut
    Dans ton error.php y a quoi ?

  5. #5
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Juillet 2007
    Messages
    85
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juillet 2007
    Messages : 85
    Points : 54
    Points
    54
    Par défaut
    Bonjour,

    Merci de répondre scvo.0ne.

    Dans mon fichier error.php, il y a :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <html>
        <head>
     
        </head>
        <body>
            Erreur
        </body>
    </html>

    J'en déduis que mon fichier n'est pas complet.

    David

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    251
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 251
    Points : 383
    Points
    383
    Par défaut
    Je te confirme. Il devrait y avoir du php qui s'occupe de l'enregistrement de l'image

  7. #7
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Juillet 2007
    Messages
    85
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juillet 2007
    Messages : 85
    Points : 54
    Points
    54
    Par défaut
    C'est bien ce que croyais.
    Quelqu'un aurait un exemple de code à mettre?

    Merci d'avance.

Discussions similaires

  1. Sauvegarder un texte dans une image png
    Par sousou12 dans le forum Général Java
    Réponses: 1
    Dernier message: 16/02/2014, 00h08
  2. sauvegarder une modification dans une image
    Par SofEvans dans le forum SDL
    Réponses: 2
    Dernier message: 04/04/2009, 14h22
  3. sauvegarder sélection dans une image
    Par BobaL dans le forum AWT/Swing
    Réponses: 2
    Dernier message: 20/06/2007, 02h26
  4. Réponses: 1
    Dernier message: 30/05/2007, 12h33
  5. Copier un canvas dans une image
    Par TheSeb dans le forum Delphi
    Réponses: 4
    Dernier message: 16/04/2007, 15h17

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