Ingresar texto a una imagen

marco64yes · #1 (**permalink**) 17/08/2011, 21:04

Hola que tal amigos!!

Tengo reto para ustedes, alguien sabe si por medio de javascript se puede empotrar o plasmar un texto a una imagen ???

Muchas gracias, saludos!!

Panino5001 · #2 (**permalink**) 17/08/2011, 22:13

Un ejemplo: http://disegnocentell.com.ar/test2.php

Código PHP:

  <!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></title>
</head>

<body>
<canvas id="pp" width="500" height ="350" onclick="window.open(this.toDataURL(),'','width=500,height=350');" style="cursor:pointer;">Acéptalo: Tu navegador es obsoleto :)</canvas>
<p>Click sobre la imagen</p>
<script>
var image=new Image();
image.src='arwen.jpg';
image.onload=function(){
    var ctx = document.getElementById("pp").getContext("2d");
    ctx.drawImage(image,0,0);
    ctx.fillStyle = '#FFF';
    ctx.font = 'bold 60px Verdana';
    ctx.textBaseline = 'bottom';
    ctx.fillText('¿Esto?', 130, 180);
}
</script>
</body>
</html>

Más info:
http://www.html5tutorial.info/html5-canvas-text.php

maycolalvarez · #3 (**permalink**) 17/08/2011, 22:13

depende de varios factores:

-sin js: puedes hacer que una capa con texto esté por encima de la imágen con CSS

-con canvas como te indico @panino5001, (requiere navegador compatible)

-sin js: desde el servidor puedes imprimir el texto en la imagen y dumpear el binario

marco64yes · #4 (**permalink**) 18/08/2011, 09:13

Cita:

Iniciado por Panino5001

Un ejemplo: http://disegnocentell.com.ar/test2.php

Código PHP:

  <!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></title>

</head>

 
<body>

<canvas id="pp" width="500" height ="350" onclick="window.open(this.toDataURL(),'','width=500,height=350');" style="cursor:pointer;">Acéptalo: Tu navegador es obsoleto :)</canvas>

<p>Click sobre la imagen</p>

<script>

var image=new Image();

image.src='arwen.jpg';

image.onload=function(){

    var ctx = document.getElementById("pp").getContext("2d");

    ctx.drawImage(image,0,0);

    ctx.fillStyle = '#FFF';

    ctx.font = 'bold 60px Verdana';

    ctx.textBaseline = 'bottom';

    ctx.fillText('¿Esto?', 130, 180);

}

</script>

</body>

</html>

Más info:
http://www.html5tutorial.info/html5-canvas-text.php

Hola que tal... si pero a lo que voy es de una imagen virgen, ingresarle un texto y guardarla en una carpeta para obtener una segunda imagen pero ahora con un texto ... creo que me falto poner estos otros puntos, perdon :S creen que se pueda con js ?

Panino5001 · #5 (**permalink**) 18/08/2011, 09:59

Con lo de crear una imagen nueva, ningún problema, de hecho es lo que sucede (lo hace el método toDataURL). Pero en un entorno web javascript no tiene acceso al sistema de archivos, así que ahí, para guardar la imagen en un directorio vas a necesitar lenguaje de servidor.

marco64yes · #6 (**permalink**) 18/08/2011, 11:17

Cita:

Iniciado por Panino5001

Con lo de crear una imagen nueva, ningún problema, de hecho es lo que sucede (lo hace el método toDataURL). Pero en un entorno web javascript no tiene acceso al sistema de archivos, así que ahí, para guardar la imagen en un directorio vas a necesitar lenguaje de servidor.

Oye una disculpota pero al correr el codigo que me das y al agregarle una imágen no me aparece la imagen :S al correr el codigo solo me aparece:

Acéptalo: Tu navegador es obsoleto :)
Click sobre la imagen

pero ald arle click en Aceptalo.... no me permite el evento onclick,, con la etiqueta <canvas> lo cambien aun div, pero al darle click me aparece un warning diciendo que esta propiedad no acepta este objeto... :S

no tendras algun otro ejemplo o que le cambi alli ?

gracias

Panino5001 · #7 (**permalink**) 18/08/2011, 11:19

Seguramente estás usando Explorer < 9, que no acepta canvas. Acéptalo: Tu navegador es obsoleto

marco64yes · #8 (**permalink**) 18/08/2011, 12:06

Cita:

Iniciado por Panino5001

Seguramente estás usando Explorer < 9, que no acepta canvas. Acéptalo: Tu navegador es obsoleto

Que tal oye lo probe con mozilla y ya lo acepta, pero la imagen no la muestra :S aparece todo blanco .. se ve la dimencion pero en blanco todo.. que sera ?

Panino5001 · #9 (**permalink**) 18/08/2011, 12:45

No sé qué decirte. A mi me funciona sin problemas en Firefox.