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
    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
    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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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