Este fue el tema de un problema que se me presento recientemente, teniamos una grafica creada en chart.js y la queriamos guardar en imagen automaticamente para despues ponerla en un PDF.
Este articulo es parte de la Guia Maestra Crear graficas con Chart.js, PHP y MySQL
Las gráficas generadas con Chart.js aprovechan la potencia de HTML5 Canvas. Una de las capacidades más interesantes del elemento <canvas> es la función toDataURL(), la cual permite extraer la representación visual del gráfico en una cadena de texto codificada en Base64.
Las gráficas generadas con Chart.js son visualmente atractivas, pero al ser renderizadas en el lado del cliente mediante HTML5 Canvas, tienen una limitación: no existen como archivos físicos en el servidor. Para solucionar esto, aprovechamos la función nativa toDataURL(), la cual nos permite “fotografiar” el canvas y convertirlo en una cadena de texto en Base64.
El desafío técnico del Base64
El método canvas.toDataURL() nos devuelve una cadena larga que representa la imagen. Sin embargo, no podemos guardarla directamente tal como llega, ya que incluye un prefijo de metadatos (ej. data:image/png;base64,...) que corrompería el archivo si intentamos decodificarlo sin procesar. Aquí es donde entra nuestra técnica de limpieza en el servidor.
Implementación de la Técnica Paso a Paso
Para que esta integración entre JavaScript y PHP sea exitosa y segura, seguimos un flujo lógico de cinco etapas:
1. Renderizado y Preparación
Primero, generamos la gráfica de forma habitual con Chart.js. Una vez que la animación termina o el usuario decide exportar, accedemos al objeto del canvas mediante su ID para extraer los datos binarios en formato de texto.
2. El Puente: Formulario y Campo Oculto
Como necesitamos enviar una gran cantidad de texto al servidor, la forma más sencilla es crear un formulario HTML con un <input type="hidden">. Mediante un pequeño script de JS, capturamos el valor del toDataURL() y lo asignamos a este campo justo antes de enviar el formulario.
3. Procesamiento y Limpieza en PHP
Al recibir los datos en el servidor, PHP se encuentra con la cadena completa. El paso crítico aquí es “limpiar” el código. Usamos funciones de cadena (como str_replace o explode) para remover el encabezado de tipo de imagen. Solo queremos la data pura para que la decodificación sea exacta.
4. Decodificación Binaria
Con la cadena limpia, utilizamos la función base64_decode(). Esta función transforma el texto nuevamente en los datos binarios originales que componen la imagen PNG. Es el proceso inverso a lo que hizo el navegador.
Video
En el video de a continuacion pueden ver el funcionamiento de esta tecnica.
Descarga
Ahora pueden descargar el codigo completo.
Link: https://drive.google.com/file/d/1HhfiMjVzm71nbbWqjQK0ImQj1No8Gitc/view