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