Como guardar la imagen de una grafica de Chart.js con PHP
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.
Introduccion
Las graficas en Chart.js usan HTML5 y mas especificamente la caracteristica de canvas, pues existe una caracteristica de canvas que sirve para obtener la imagen creada usando la funcion toDataURL() del objeto del canvas.
El canvas.toDataURL() nos devuelve el codigo en base 64 de la imagen.
Tecnica
La tecnica efectiva, digo la que usamos y nos funciono fue lo siguiente:
- Generar la grafica normalmente en Chart.js
- Crear un formulario con un campo oculto que llevara el texto en base 64 de la imagen
- Con un script en javascript hacemos que el codigo base 64 de la imagen se pase al campo de texto al momento de hacer submit del formulario
- Con un script en PHP recibimos el codigo, le quitamos los primeros caracteres
- Decodificamos el base 64 con base64_decode
- Guardamos la cadena de texto decodificada en un archivo .png
Video
En el video de a continuacion pueden ver el funcionamiento de esta tecnica.
Descarga
Ahora pueden descargar el codigo completo.
Link: http://yabuilder.com/11227357/chartjs-savephp