1

Tengo un canvas realizado con Chart.js:

<div>
    <canvas id="densityChart" width="500" height="400"></canvas>
</div>

El JavaScript que lo dibuja es el siguiente:

var densityCanvas = document.getElementById("densityChart");

Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;

var densityData = {
    label: 'MUJERES ATENDIDAS POR MES',
    data: [
        '<?php echo $TOTAL_M_enero ?>',
        '<?php echo $TOTAL_M_feb ?>',
        '<?php echo $TOTAL_M_marzo ?>',
        '<?php echo $TOTAL_M_abril ?>',
        '<?php echo $TOTAL_M_mayo ?>',
        '<?php echo $TOTAL_M_junio ?>',
        '<?php echo $TOTAL_M_julio ?>',
        '<?php echo $TOTAL_M_agosto ?>',
        '<?php echo $TOTAL_M_sep ?>',
        '<?php echo $TOTAL_M_oct ?>',
        '<?php echo $TOTAL_M_nov ?>',
        '<?php echo $TOTAL_M_dic ?>'
    ],
    backgroundColor: 'rgba(255,192,203,0.6)',
    borderWidth: 0
};

var gravityData = {
    label: 'HOMBRES ATENDIDOS POR MES',
    data: [
        '<?php echo $TOTAL_H_enero ?>',
        '<?php echo $TOTAL_H_feb ?>',
        '<?php echo $TOTAL_H_marzo ?>',
        '<?php echo $TOTAL_H_abril ?>',
        '<?php echo $TOTAL_H_mayo ?>',
        '<?php echo $TOTAL_H_junio ?>',
        '<?php echo $TOTAL_H_julio ?>',
        '<?php echo $TOTAL_H_agosto ?>',
        '<?php echo $TOTAL_H_sep ?>',
        '<?php echo $TOTAL_H_oct ?>',
        '<?php echo $TOTAL_H_nov ?>',
        '<?php echo $TOTAL_H_dic ?>'
    ],
    backgroundColor: 'rgba(191,205,230,0.6)',
    borderWidth: 0
};

var planetData = {
    labels: [
        "ENERO",
        "FEBERO",
        "MARZO",
        "ABRIL",
        "MAYO",
        "JUNIO",
        "JULIO",
        "AGOSTO",
        "SEPTIEMBRE",
        "OCTUBRE",
        "NOVIEMBRE",
        "DICIEMBRE"
    ],
    datasets: [
        densityData,
        gravityData
    ]
};

var chartOptions = {
    scales: {
        xAxes: [
            {
                barPercentage: 1,
                categoryPercentage: 0.6
            }
        ],
        yAxes: [
            {
                ticks: {
                    stepSize: 50,
                    beginAtZero: true
                }
            }
        ]
    }
};

var barChart = new Chart(densityCanvas, {
    type: 'bar',
    data: planetData,
    options: chartOptions
});

El gráfico se representa correctamente y ahora lo que quiero es guardarlo en una carpeta del servidor automáticamente cuando se cargue la página y que las veces que se cargue se remplace la imagen que estaba antes. ¿Cómo podría realizar esto?

2
  • ¿Qué lenguaje de servidor es el que estás usando? Para guardar una imagen en el servidor necesitas enviar los datos al servidor y este se encargará de interpretar dichos datos y convertirlos en una imagen, pero esto dependerá del lenguaje back-end en el que estés trabajando.
    – ElChiniNet
    Commented el 6 oct. 2019 a las 22:26
  • Estoy viendo que en tu código sitúas etiquetas PHP, así que estás usando este lenguaje en el lado del servidor. Deja crear un pequeño ejemplo.
    – ElChiniNet
    Commented el 6 oct. 2019 a las 22:36

1 respuesta 1

0

Como he visto que estás usando etiquetas PHP en tu código, asumo que estás usando este lenguaje en el lado del servidor. Por lo tanto, una solución a lo que quieres hacer puede ser la siguiente (no la he probado pero te debería funcionar):

  • Cuando el gráfico termine de animarse, llamar al método toBase64Image. Este método te devolverá una representación en Base64 de la imagen del gráfico.

  • Enviar la representación de la imagen en Base64 a una función JavaScript que extraerá solo los datos de la imagen y los enviará al servidor mediante AJAX.

  • Recibir los datos enviados con PHP y guardarlos en una carpeta del servidor usando file_put_contents.

En las opciones, añade un parámetro animation para detectar el evento onComplete.

var chartOptions = {
    ...
    animation: {
        onComplete: function () {
            saveImage(this.toBase64Image());
        }
    }
};

La función saveImage recibirá la representación en base64, extraerá los datos y los enviará por AJAX al servidor llamando al script saveImageOnServer.php:

function saveImage (base64) {
    var data = base64.replace(/^data:image\/png;base64,(.+)$/, '$1');
    var request = new XMLHttpRequest();
    request.open('POST', '/saveImageOnServer.php', true);
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    request.send('imageData=' + data);
}

El script saveImageOnServer.php recibirá los datos y los guardará en una carpeta usando file_put_contents que automáticamente, si el fichero no existe, lo crea, y si existe lo sobrescribe:

$data = $_POST['imageData'];
file_put_contents('/my_server_folder/image.png', base64_decode($data));

Solo como referencia, por si alguien llega a esta respuesta buscando hacer lo mismo con un canvas que no esté creado con Chart.js. Aquí dejo esta respuesta que le puede servir. Y si deseara descargar la imagen sin hacer uso de ningún lenguaje de servidor, esta otra también podría ser útil.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.