Por favor, canvas guardar imagen

quieropaginaweb · #1 (**permalink**) 09/12/2013, 01:04

Alguien puede ayudarme, necestio modificar este código

Código PHP:

  // Generate the signature image

  function generateImage() {

    

    var saveImageCanvas = document.createElement("canvas");

    saveImageCanvas.width = canvas.width;

    saveImageCanvas.height = canvas.height;

            

    var ctx = saveImageCanvas.getContext("2d");

    ctx.lineWidth = 1;

    ctx.strokeStyle = 'black';

    ctx.font="30px Arial";

      

    ctx.fillStyle="white";

    ctx.fillRect(0,0,canvas.width,canvas.height);      

      

    ctx.beginPath();

    for (var i = 1; i < m_penData.length; i++) {

      // Draw a line from the previous down point to this down point.

      // This is the simplist thing you can do; a more sophisticated program

      // can perform higher quality rendering than this!

          

      var prev = tabletToScreen(m_penData[i - 1]);

      var act = tabletToScreen(m_penData[i]);      

        

      if (m_penData[i].sw == 1) {

        ctx.moveTo(prev.x, prev.y);

        ctx.lineTo(act.x, act.y);

      }  

    }

    ctx.closePath();

    ctx.stroke();

      

    preview.src = saveImageCanvas.toDataURL("image/png");    

    

 
    

  }

Quisiera saber como guardar el archivo.
Alguna ayuda
Gracias

quieropaginaweb · #2 (**permalink**) 12/12/2013, 03:36

Ahora estoy atascado en esto:

preview.src = saveImageCanvas.toDataURL("image/png");

Este codigo:
window.open(saveImageCanvas.toDataURL("image/png"));

Me abre la cadena base64 en la barra de navegacion y quisiera que el codigo base 64 me lo escribiera en el documento html, este:

Código PHP:

 
<html>

  <head>

    <link rel="stylesheet" type="text/css" href="demoButtons.css" />

    <script type="text/javascript" src="demobuttons.js"></script>

    <script type="text/javascript">

      function initDemo() {

        var signatureForm = new SignatureForm(document.getElementById("signatureImage"));

        

        signatureForm.connect();

      }

    </script>

  </head>

  <body>

  <div id="createPNGButton"> 

</div>

    <div>

      <div id="signatureDiv">

        Signature image:<br/>

        <img id="signatureImage"/>

      </div>

      <div>

        Actions:<br/>         

        <input type="button" id="signButton" value="Start demo" onClick="javascript:initDemo()"/>

      </div>

    </div>

    <p id="signatureDiv"><p>

     <canvas id="wgssSTU" width="300" height="300"></canvas>

     

<?php

 
//imagen png codificada en base64

$Base64Img = " AQUI";

 
//eliminamos data:image/png; y base64, de la cadena que tenemos

//hay otras formas de hacerlo                   

list(, $Base64Img) = explode(';', $Base64Img);

list(, $Base64Img) = explode(',', $Base64Img);

//Decodificamos $Base64Img codificada en base64.

$Base64Img = base64_decode($Base64Img);

//escribimos la información obtenida en un archivo llamado 

//unodepiera.png para que se cree la imagen correctamente

file_put_contents('unodepiera.png', $Base64Img);    

echo "<img src='unodepiera.png' alt='unodepiera' />";

?>

  </body>

</html>

Le estoy dando vueltas y nada, si alguien puede ayudarme.

gracias

marlanga · #3 (**permalink**) 12/12/2013, 04:08

La cadena base64 que te devuelve el canvas con toDataURL la puedes poner directamente en el SRC de una imagen, y se verá bien.

Por otro lado, quieres que javascript llame a PHP, típico error de novato de no entender bien el funcionamiento de un lenguaje de servidor como PHP, y un lenguaje del lado del cliente como javascript.
Para guardar la imagen en el servidor, métela con javascript en un campo HIDDEN de un formulario, y manda el formulario con POST al servidor.

quieropaginaweb · #4 (**permalink**) 12/12/2013, 04:56

Muchas gracias por tu respuesta, seria mucho pedir algún ejemplo?
Gracias