Guardar imagen CANVAS con php

[HackID1]

Hola muy buenas forosdelweb!!!!.

Bueno llevo ya unas 2 semanas o más buscando la forma de poder tener una imagen y justo encima de ella poder escribir para luego guardar esa imagen en una base de datos.

Lo he buscado de muchas formas y una que he visto ayer ha sido haciendo uso del CANVAS de esta forma conseguí poder escribir encima de una imagen de fondo pero NO he podido guardar esta imagen modificada.

El código CANVAS lo he conseguido de las siguientes páginas.

http://www.tutorialeshtml5.com/2012/...vas-html5.html

http://www.tutorialeshtml5.com/2011/...vas-html5.html

Y otros más que he estado buscando.

Al final he conseguido esto poder tener una imagen puesta debajo del CANVAS y poder dibujar con una paleta de dibujo.

Necesito saber como puedo seguir adelante, y mostrar la IMG en pantalla poder dibujar en ella correctamente y al final un botón de guardar esa imagen modificada con el texto que hayas puesto encima.

ESO es todo lo único que me falta es eso, poder guardar la imagen con el texto o dibujo que haya echo encima de ella con el Canvas

Se que puede que se haga de otra forma pero no lo he conseguido, he leído y se usa la función

Código Javascript:

window.open(canvas.toDataURL());
 

para guardar la imagen, pero no lo he conseguido.


Porfavor me gustaría me puedan ayudar.

PD: TODO este código de la paleta de dibujo en Canvas lo he sacado de esta web.
Donde podeis probarla en formato real.
Luego la he modificado un poco intentando conseguir guardar la imagen con el texto pero no he podido.
:(

http://www.oscardelossantos.es/softw...nt-con-canvas/

Saludos y gracias al que me pueda ayudar con este tema de guarda la imagen con el texto modificado.

[maycolalvarez]

primero aclaremos un poco las cosas:

window.open NO guarda nada, es una función para abrir ventanas, por lo que obviamente puedes deducir sin necesidad de estudiar la función, claro esta que con la presión uno puede volverse ciego y sordomudo.

veo que mencionas PHP, pero NO veo nada en lo que uses a PHP, por lo que me da a entender que no conoces php, si no es así, aclárame hasta que punto lo dominas.

lo primero que debes hacer es reorganizar tus ideas, y en eso puedo ayudarte:

1- primero busca en la documentación del objeto CANVAS si existe alguna función que te devuelva el binario de la imagen creada, o algo similar, creo recordar que existe una función que te proporciona el BASE64 (canvas.toDataURL() si no me equivoco y veo que ya la usas), lo cual te servirá perfectamente para lo que necesitas.

2- una vez obtengas ese BASE64 (o array binario codificado) necesitas enviarlo al servidor, allí está tu error, no puedes enviar un base64 a un servidor solo con el base64, necesitas enviar una petición al servidor.

3- para enviar el binario al servidor, puedes o usar un form oculto o usar AJAX.

4- una vez en PHP puedes hacer uso de fopen, base64_decode y fwrite para guardar la imagen en disco.

espero que con esto logres tu objetivo, si estás trancado postea tus avances

[HackID1]

Buenas primero agradecer que te hayas interesado.

Y si he buscado muchas formas y ninguna la verdad lo he conseguido justo como hace falta (La imagen y escribir en ella en tiempo real).
(He conseguido esto de escribir encima de la imagen, pero no es justo como quiero por eso pruebo con Canvas.)

Es que no he posteado el código porque eran muchos caracteres y no me permitia además es bastante extenso porque es el código de la pagina que estoy haciendo, y además todo el código necesario para la paleta de dibujo y el canvas.

El php bueno lo único es que tengo un formulario con unos campos que rellenas de un trabajo para un cliente, estos campos son algunos:

descripcion
precio
pagado
etc....

Esto en un form que tengo bien los guardo todos correctos en la tabla trabajos, pero ahora en medio del Formulario necesito esto que quiero. Una imagen y encima de ella escribir texto y poder almacenarla después en el HDD y una URL en un campo de la tabla trabajos para luego hacer referencia a ella en otra página de pedidos o informes posteriormente.

Por eso necesito almacenar la imagen, una vez escrito el texto encima de ella, lo que creo puedo conseguir con CANVAS, Que he dado muy poco pero lo estoy intentando.

He estado mirando un poco sobre lo de Base64, pero me informaré más pero si lo he usado la verdad sin saber bien que es en el código.

En si necesito realizar un formulario y dentro una imagen editable, la editas y al dar a guardar pues que se guarde esa imagen modificada

Leeré acerca de lo que me has dicho. Gracias por tu interes y si puedes darme algunas pistas más sobre si voy bien encaminado o no,, lo agradezco.

REPOST: Estuve leyendo un poco sobre Base64 y es para codificar imagenes y de esta forma generar un código que es la imagen en si.

http://norfipc.com/web/como-insertar...aginas-web.php

Quisiera saber si esa forma de codificar es la que puedo usar. Y en qué me ayudaría esto para poder tener la imagen y escribir encima de ella, y poder guardarla??? Perdona mi ignorancia pero poco o casi nada habia conocido sobre base64.

SI hace falta el código te lo puedo pasar por otro método para probarlo y ayudarme porfavor, es lo único que me hace falta lo de la imagen. Aquí no lo posteo porque es extenso.

Saludoos!!

[stock]

En php puedes usar la función imagecreatefromstring para convertir el texto a imagen.

http://www.php.net/manual/en/functio...fromstring.php

Luego puedes usar la función imagejpeg para guardar la imagen a disco.

http://www.php.net/manual/en/function.imagejpeg.php

Código PHP:

<?php
$data = 'iVBORw0KGgoAAAANSUhEUgAAABwAAAASCAMAAAB/2U7WAAAABl'
       . 'BMVEUAAAD///+l2Z/dAAAASUlEQVR4XqWQUQoAIAxC2/0vXZDr'
       . 'EX4IJTRkb7lobNUStXsB0jIXIAMSsQnWlsV+wULF4Avk9fLq2r'
       . '8a5HSE35Q3eO2XP1A1wQkZSgETvDtKdQAAAABJRU5ErkJggg=='; //esto vendrá en el request
$data = base64_decode($data);
 
$im = imagecreatefromstring($data);  //convertir a imagen
if ($im !== false) {
    imagejpeg($im, 'el_nombre_que_le_quieras_dar.jpg'); //guardar a disco
    imagedestroy($im); //liberar memoria
}
else {
    echo 'Un error ocurrio al convertir la imagen.';
}
?>
 

Intenta ese ejemplo a ver si te funciona.

Saludos

PS: hace años que no programo en PHP, pero ese código se parece a como lo hago generalmente en ruby xD

[HackID1]

Buenas!! Gracias por las soluciones, mira he logrado poder dibujar a mano alzada encima de un Canvas el cual muestra una imagen por defecto de fondo.

Luego por medio de un botón se guarda la imagen con el dibujo a mano alzada escrito encima de el. Ok.

Pero quisiera poder añadir al código una forma de poder escribir texto encima del Canvas

He estado mirando y creo que se hace con.

Código Javascript:

ctx.font = '24px "Tahoma"';
    ctx.fillText("Texto en el Canvas",0,0);
 

Pero no sale ni el texto encima de la imagen.

Como puedo hacer para escribir texto encima de el Canvas, o otra opción mejor (si se puede) es teclear un texto en un input="text" y que ese texto se traslade encima del canvas en una posición determinada.

¿Esto se puede.? Si podeís ayudarme con esto del Texto alguien que sea de uso habitual con el Canvas.

Si hace falta mi código lo puedo postear.

[HackID1]

He visto este código que permite tener un texto y moverlo por el Canvas, pues esto me gustaría unirlo de alguna forma con mi Código Canvas.

http://jsfiddle.net/h3BCq/1/

Se podría de alguna forma tener esta parte de código que permite mover el texto dentro de mi Canvas para poder mover el texto encima.
Espero puedan ayudarme. mi código es este:
fichero1.html

Código HTML:

<canvas id="canvas" width="290" height="330"></canvas>
 
<div class="gui">
      <input type="color" id="color" value="#FF9200">
      <button id="bt-clear">Limpiar</button>
      <button id="bt-save">Guardar</button>
</div>
 
<script src= "script/canvas.js"></script>
 

canvas.js

Código Javascript:

var tiemposcambian = tiemposcambian || {};
 
tiemposcambian.GuardandoPNGs = (function() {
  var mousePressed = false;
  var lastX, lastY;
  var ctx;
 
  function init() {
    // init canvas
        //recojemos el canvas poniendo la id del canvas html5 para relacionarlo
    var canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
        /*AÑADIDO*/
    //creamos la nueva imagen 
                    var img = new Image(290,333);
                    //le decimos la ruta de la imagen, en este caso html5.jpg
                    img.src = "img_canvas/camisa2.png";
                                
                    img.onload = function() {
                        //uso el contexto del canvas y el metodo drawimage para cargar el objeto y la posición x e y
                        ctx.drawImage(img, 0, 0);
                        
                    }
                    
                    
        /*FIN AÑADIDO*/ 
    resetCanvas();
    
    /*
    //Creamos una funcion que se ejecutará al iniciar la ventana
                function img_canvas() { 
                    //recojemos el canvas poniendo la id del canvas html5 para relacionarlo
                    var canvas = document.getElementById("img");
                    //Cojemos la 2D para dibujar en él
                    var context = canvas.getContext("2d");
                    //creamos la nueva imagen 
                    var img = new Image(290,333);
                    //le decimos la ruta de la imagen, en este caso html5.jpg
                    img.src = "img/camisa2.png";
                    
                    
                //pasamos la imagen al 2d del canvas y se dibujará
                //en 0 0 podemos poner las cordenadas de donde empezar a dibujar la imagen
                context.drawImage(img, 0, 0);
                };
    */
 
    // 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 = 4;
      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('image/png');
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      // request complete
      if (xhr.readyState == 4) {
       
        window.open('snapshots/'+xhr.responseText,'_blank');
      }
    }
    
    xhr.open('POST','snapshot.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);
    
    /*añadido*/
    //creamos la nueva imagen 
                    var img = new Image(290,333);
                    //le decimos la ruta de la imagen, en este caso html5.jpg
                    img.src = "img_canvas/camisa2.png";
    //pasamos la imagen al 2d del canvas y se dibujará
                //en 0 0 podemos poner las cordenadas de donde empezar a dibujar la imagen
                //ctx.drawImage(img, 0, 0);
                
                img.onload = function() {
                        //uso el contexto del canvas y el metodo drawimage para cargar el objeto y la posición x e y
                        ctx.drawImage(img, 0, 0);
                    }
    /* fin añadido*/
  }
 
  return {
    'init': init
  };
});
 
 
window.onload = function() {
  new tiemposcambian.GuardandoPNGs().init();
};
 

Y el fichero se guarda con el botón "GUARDAR" esta parte de código no creo sea necesaria..
Solo quisiera poder tener una forma de escribir texto encima de este CANVAS.

Saludos y gracias a todos!!!

[HackID1]

Bueno lo he solucionado usando canvas.

Coloco una imagen de fondo y permite dibujar encima a mano alzada para luego guardar esta imagen.

Lo he conseguido buscando y buscando, lo que al final encontre estuvo en lostiemposcambian una web muy buena.

Gracias por todas sus ayudas!!!.