Guardar canvas como imagen .png (download)

honsuales · #1 (**permalink**) 06/08/2012, 08:44

Hola buenas tardes.
Estoy empezando con javascript y ahora mismo tambien me encuentro con una necesidad en php.
Me imagino que es algo sencillo pero no avanzo.
Más exactamente necesito guardar un canvas html5 como imagen .png, es decir que al pulsar un botón el canvas se convierte en .png mediante canvas.toDataURL() y se fuerce la descarga de la imagen en el ordenador del usuario via php.
Todo esto con la extensión de archivo .png, que es de lo que se trata.
He visto muchos ejemplos y no lo consigo.
Por favor mirar este link:
http://motyar.blogspot.com.es/2010/04/save-html5-canvas-data-as-image.html
y el ejemplo : http://motyar.info/draw/

No se a qué se refiere con lo de poner canvas.todataURL() como POST y agradecería unas lineas de código para poder avanzar y una pequeña explicación si es posible para entenderlo.
Muchas gracias!

Panino5001 · #2 (**permalink**) 06/08/2012, 12:56

Fijate si te sirve:

Código PHP:

  <?php 
if(isset($_POST['x']) && !empty($_POST['x'])){
    $file=base64_decode($_POST['x']);
    $ctype="image/png";
    header("Pragma: public"); 
    header("Expires: 0"); 
    header("Cache-Control: must-revalidate, post-check=0, pre-check=0"); 
    header("Cache-Control: private",false);
    header("Content-Type: $ctype"); 
    header("Content-Disposition: attachment; filename=\"archivo.png\";" ); 
    header("Content-Transfer-Encoding: binary"); 
    header("Content-Length: ".strlen($file))/1024; 
    echo $file;
    exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
onload=function(){
    var c=document.getElementsByTagName('canvas')[0];
    c.style.cursor="pointer";
    var ctx=c.getContext('2d');
    ctx.fillStyle="rgb(255,0,0)";
    ctx.fillRect(0,0,100,100);
    (function(c){c.onclick=function(){
        document.getElementById('x').value=c.toDataURL().split('base64,')[1];
        document.getElementById('f1').submit();
    }})(c);
}
</script>
</head>

<body>
<canvas width="100" height="100" id="canvas"></canvas>
<form id="f1" action="<?php echo basename($_SERVER['PHP_SELF']) ?>" method="post"><input name="x" id="x" type="hidden"></form>
</body>
</html>

honsuales · #3 (**permalink**) 06/08/2012, 13:49

¿Con que nombre tengo que guardar el .php? ¿va aparte no?
¿O todo el código que me enviaste es en un sólo archivo con extensión .php?
Me arroja este error:
Cannot modify header information - headers already sent by...

Es la primera vez que estoy con .php y ando con un pequeño lío...

Realmente lo que necesito es que el usuario pueda guardar como imagen .png al pulsar un botón y pueda descargárselo a su ordenador

Gracias!

Panino5001 · #4 (**permalink**) 06/08/2012, 14:52

Va todo en un mismo archivo y con el nombre que quieras y extensión php. Hay que probarlo en un servidor con soporte php. Si te aparece ese error es porque estás copiando y pegando mal.

honsuales · #5 (**permalink**) 06/08/2012, 18:22

Muchas Gracias Panino!
Funciona perfectamente!
Un saludo!

pedrolopes999 · #6 (**permalink**) 24/04/2014, 21:48

sabes como modificarlo para que el png sea solo de una parte del canvas?