Como guardar la imagen de una grafica de Chart.js con PHP

0

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:

  1. Generar la grafica normalmente en Chart.js
  2. Crear un formulario con un campo oculto que llevara el texto en base 64 de la imagen
  3. 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
  4. Con un script en PHP recibimos el codigo, le quitamos los primeros caracteres
  5. Decodificamos el base 64 con base64_decode
  6. 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

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here