seleccionar canvas class para procesar datos

Dante450 · #1 (**permalink**) 13/07/2011, 02:34

Primero que nada, Hola a todos los usuarios de foros del web, la verdad que me gusta mucho este foro y me ayudan seguido con todo su material, espero que tambien puedan ayudarme ahora :).

Estaba trabajando con cufon, seguramente lo conocen, es una web con un script que nos permite mediante un codigo que proporciona usar cualquier tipo de fuente que deseemos utilizando etiquetas del tipo <canvas>.

Bueno, necesito guardar el contenido de estos canvas para luego procesarlo via PHP, para lo cual estaba utilizando la siguiente guia:

http://www.permadi.com/blog/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/

Pero, me doy con que, en la guia, estan utilizando el id del canvas para guardar sus datos, el id del canvas del ejemplo de esa web es "testCanvas", pero cuando se trabaja con cufon, cufon no le pone id a sus canvas, le pone solo class, mi canvas entonces seria <canvas class="cufon">.

Mi pregunta es: como puedo guardar todo el contenido dentro de canvas class cufon con javascript, utilizando la class como referencia y no el id? ese ejemplo de esa web me es muy util para lo que necesito hacer pero, debido a que no tengo un id no se como modificar mi codigo para hacer funcionar el ejemplo.

Muchas gracias a todos desde ya por su tiempo y por su valiosa ayuda.

Saludos.

Panino5001 · #2 (**permalink**) 13/07/2011, 05:05

Podrías usar elemento.getElementsByTagName('canvas') o document.getElementsByClassName
Este último no funciona en viejas versiones de Explorer, cosa que evidentemente no te preocupa porque pasa lo mismo con el método toDataURL de canvas que te propusiste utilizar.

Dante450 · #3 (**permalink**) 13/07/2011, 11:35

Muchisimas gracias por tu buena voluntad y por tu ayuda, pude progresar un poco :). pero sin embargo sigo teniendo algunos inconvenientes.

Mi script quedaria como este:

<script type="text/javascript">

function saveViaAJAX()
{
var testCanvas = element.getElementsByTagName('canvas');
var canvasData = testCanvas.toDataURL("image/png");
var postData = "canvasData="+canvasData;
var debugConsole= document.getElementById("debugConsole");
debugConsole.value=canvasData;
//alert("canvasData ="+canvasData );
var ajax = new XMLHttpRequest();
ajax.open("POST",'testSave.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
//ajax.setRequestHeader('Content-TypeLength', postData.length);
ajax.onreadystatechange=function()
{
if (ajax.readyState == 4)
{
//alert(ajax.responseText);
// Write out the filename.
document.getElementById("debugFilenameConsole").in nerHTML="Saved as<br><a target='_blank' href='"+ajax.responseText+"'>"+ajax.responseText+" </a><br>Reload this page to generate new image or click the filename to open the image file in a new window.";
}
}

ajax.send(postData);
}
</script>

y la funcion es llamada por un <button onclick="saveViaAJAX();">Click</button>

Pero al hacer click en este boton no sucede nada, alguien podria decirme a que se debe esto? como tambien tengo la debugConsole en el textarea, probe recibiendo el valor de las variables alli, pero tampoco se actualiza, parece que no funciona bien el
element.getElementsByTagName('canvas');. Aunque son suposiciones mias, que puedo hacer?

Muchas gracias por su ayuda.

Saludos.

Panino5001 · #4 (**permalink**) 13/07/2011, 18:38

Lo que pasa es que getElementsByTagName es una colección y hay que acceder a sus miembros por índice.
Te dejo un ejemplo:

Código PHP:

  <?php  
if(isset($_POST['button'])){ 
    echo '<pre>'; 
    print_r($_POST); 
    echo '</pre>'; 
    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"> 
function cuadrado(l,col,p){ 
    var c=document.createElement('canvas'); 
    var ctx=c.getContext('2d');     
    ctx.fillStyle="rgba("+col+")"; 
    ctx.fillRect(0,0,l,l); 
    p.appendChild(c); 
} 
function guardar(){ 
    var cs=document.getElementsByTagName('canvas'),length=cs.length,i=0,fragment=document.createDocumentFragment(),input; 
    for(;i<length;i++){ 
        input=document.createElement('input'); 
        input.type='hidden'; 
        input.name='image_'+i; 
        input.value=cs[i].toDataURL(); 
        fragment.appendChild(input); 
    } 
    document.getElementById('f').appendChild(fragment); 
    return true; 
} 
onload=function(){ 
    //dibujar 
         cuadrado(50,'255,0,0,1',document.body); 
         cuadrado(50,'0,0,255,1',document.body); 
         cuadrado(50,'255,0,0,.5',document.body); 
          
} 
</script> 
 
</head> 
 
<body> 
<form id="f" action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post" onsubmit="return guardar()"> 
    <input type="submit" name="button" id="button" value="guardar" /> 
</form> 
</body> 
</html>

Dante450 · #5 (**permalink**) 13/07/2011, 21:10

Muchisimas gracias por tu ayuda! gracias a tu ejemplo pude lograr lo que me proponia y ahora puedo seguir avanzando :).

De verdad, se agradece mucho tu apoyo.

Saludos.