Guardar contenido de un DIV en una imagen JPG o PNG

Amigos, tengo un div de 800x600, (con CSS los estilos claro).
y pues obtengo una respuesta MUY agradable. Y es por eso que este DIV con todos sus estilos, quiero convertirlo a una imagen.

solo lo he conseguido con un metodo de pasar
HTML a PDFy despues a JPG

pero tiene muchos errores.

Alguien conoce de algun otro metodo mas eficaz?

LO ESTOY UTILIZANDO PARA "TEST DE FACEBOOK".
He intendado el clasico escribir el texto en una imagen, pero cuando el nombre es larguisimo, pues practicamente la imagen sale descuadrada (por asi decirlo) en realidad, el nombre sale encima de cosas donde no deberia.
ADEMAS CON la libreria GD no puedo centrar el texto, tengo que poner coordenadas X,Y a fuerzas y es por eso que se ve mal, porque el TEXTO a imprimir en la imagen siempre varia, a veces es mas largo o mas corto.


EN RESUMEN.
Quisiera pasar este DIV (solo el DIV), Ya que tengo mas divs y mas secciones.
Ó si no se puede, pues lo hago en un archivo PHP, y meto solo ese div.

Pero quiero lograr alguna de estas dos maneras.
1.- convertir DIV en imagen
2.- convertir archivo PHP (su contenido) en imagen.

Si alguien me hecha la mano, se lo agradeceria. :encouragement:

Hola Kurosaki!! una vez necesite hacer algo similar y lo logre con una libreria que se llama html2canvas, te paso el link de un ejemplo funcional
Html2Canvas Kurosaki
Avisame si te sirvio por favor :encouragement:

Excelente!!! [MENTION=164243]santiago131[/MENTION]

Html2canvas y con la GD php puedes centrar textos, dividirlo en lineas y acortarlo!

No conocia html2canvas, gracias [MENTION=164243]santiago131[/MENTION]. [MENTION=125082]kurosaki[/MENTION] algo asi necesitas??? https://www.dropbox.com/s/zmij49dadiv233b/Creadorfotofb.mp4?dl=0

Dieguit0sk8 dijo:

No conocia html2canvas, gracias [MENTION=164243]santiago131[/MENTION]. [MENTION=125082]kurosaki[/MENTION] algo asi necesitas??? https://www.dropbox.com/s/zmij49dadiv233b/Creadorfotofb.mp4?dl=0

Hacer clic para expandir...

Si ese video que me compartes es de lado de servidor (puro PHP), sin usar JS (como html2canvas), me vendria bien saber como lo hacen.
Saludos.

kurosaki dijo:

Si ese video que me compartes es de lado de servidor (puro PHP), sin usar JS (como html2canvas), me vendria bien saber como lo hacen.
Saludos.

Hacer clic para expandir...

Si me dejas el div que necesitas sacarle foto, veo que se puede hacer 🙂

Dieguit0sk8 dijo:

Si me dejas el div que necesitas sacarle foto, veo que se puede hacer 🙂

Hacer clic para expandir...

Es un div NORMAL 600px de ancho por 300px de alto
Tiene un background de la misma medida

y encima le pongo un Texto.

Le problema es el nombre.. El texto dice:

Imagen creada por "Nombre y Apellidos muy largos"

Entonces cuando el nombre es corto, todo luce genia, cuando es largo, necesito que se centre o se adapte ese texto.
con HTML y CSS logro perfectamente alinearlo, es por eso que quiero pasar ese HTML a PHP, sin usar esa libreria html2canvas
(HTML2CANVAS, me sirve de lujo, pero no lo quiero usar, quiero hacer Todo con PHP).

Miren, con codigo HTML y CSS puedo lograr crear este DIV en el navegador.
EJEMPLOS:




Lo malo es que el largo del NOMBRE siempre es diferente, si tiene 10,000 caracteres o tiene 1 solo caracter.
Yo quiero que se adapte, se centre horizontalmente y verticalmente usando PHP.
Repito no quiero usar html2canvas.

AQUI UN EJEMPLO MAL a la hora de convertir con PHP:


- - - Actualizado - - -

Alguien que me heche la mano? :fatigue:

Gracias 😉

Buenas! deberias contar los caracteres que queres insertar por linea. si pasa esa cantidad lo cortar y le agregas un <br/>

Desconozco si la librería GD te permita eso.

Una solución muy fácil (aunque no la más optimizada) es contar los caracteres como te dicen, dividir entre X caracteres, pero antes checar si la palabra termina en un espacio, de no ser así, tendrías que agregar un guión medio para indicar que la palabra continua abajo.

Para centrar el texto con GD si no lo permite nativamente, se me ocurre todo un proceso algo complejo:

1. Tener el ancho del lienzo en una variable tX.
2. Hacer un aproximado de cuantos PX usaría un carácter de ancho por ejemplo, 4px por carácter.
3. Contar los caracteres ingresados y guardarlos en una variable nC, por ejemplo, un nombre de 30 caracteres, entonces multiplicar nC por los 4px de cada carácter, obteniendo la anchura aprox. De todo el texto. En este caso 120px.
4. Ahora, dividir nC sobre dos. Obtenemos 60. Y tX también sobre 2. obtenemos 75 suponiendo un lienzo de 150px.
5. Ahora a ese 75 que es el punto medio del liebzo le restamos ese 60 que es el punto medio del texto: (tX/2)-(nC/2) que da 15, y ahí le décimos que empiece a pintar el texto.

Como todo el texto mide aprox 120 px y el lienzo es de 150px, va dejar 15px de espacio en cada lado (excepto el derecho que sera aproximado), siendo 15px+120px+15px = 150px = texto centrado.

Seria lo mismo para el alto pero tomando en cuanta también cuantas lineas son y el espacio entre saltos de linea.

En caso de que el texto supere los px del ancho del lienzo, dividir con trim la cadena donde haya espacio, y si no lo hay de plano cortarla en un punto específico y seguir en la siguiente línea, puedes improvisar agregar un guión XD

Recuerda limitar el numero de caracteres del nombre de todos modos, que no tendrás espacio infinito de lienzo.

Espero se haya entendido el algoritmucho XD , saludos.