web-dev-qa-db-fra.com

Comment enregistrer les graphiques Chart JS en tant qu'image sans fond noir à l'aide de blobs et de filesaver?

$("#NoBidsChart").get(0).toBlob(function(value) {
    saveAs(value, "Summary.jpg");
});

Ici, j'utilise Chart JS (v2.5.0) pour le rendu des graphiques. Lorsque j'essaie d'exporter les graphiques à l'aide de Canvas to Blob converter et filesaver.js, j'obtiens le fond noir. Alors, comment puis-je obtenir l'image avec une couleur d'arrière-plan personnalisée (de préférence blanche)?

html5-canvasblobchart.jsfilesaver.js
7
user7932844

Si vous voulez une couleur d’arrière-plan personnalisée, vous devez alors dessiner un arrière-plan avec votre couleur préférée, et vous pouvez le faire comme ceci ...

var backgroundColor = 'white';
Chart.plugins.register({
    beforeDraw: function(c) {
        var ctx = c.chart.ctx;
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, c.chart.width, c.chart.height);
    }
});

DÉMO

// draw background
var backgroundColor = 'white';
Chart.plugins.register({
    beforeDraw: function(c) {
        var ctx = c.chart.ctx;
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, c.chart.width, c.chart.height);
    }
});

// chart
var canvas = $('#NoBidsChart').get(0);
var myChart = new Chart(canvas, {
    type: 'line',
    data: {
        labels: [1, 2, 3, 4, 5],
        datasets: [{
            label: 'Line Chart',
            data: [1, 2, 3, 4, 5],
            backgroundColor: 'rgba(255, 0, 0, 0.2)',
            borderColor: 'rgba(255, 0, 0, 0.5)',
            pointBackgroundColor: 'black'
        }]
    }
});

// save as image
$('#save').click(function() {
    canvas.toBlob(function(blob) {
        saveAs(blob, "pretty image.png");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<button id="save">Save</button>
<canvas id="NoBidsChart"></canvas>
10
ɢʀᴜɴᴛ

Comme je l'ai indiqué dans mon commentaire à la réponse acceptée, cela m'a dérangé que l'événement beforeDraw provoque l'appel du code fillRect à plusieurs reprises. (Une fois par point de données aussi loin que je peux voir.)

Mais je ne pouvais pas obtenir cette approche au travail quand appelé à un autre événement. Cependant, je viens d'adopter l'approche de codage décrite dans: https://stackoverflow.com/a/50126796/165164 et de l'insérer dans un code enregistré pour s'exécuter sur l'événement afterRender. et laissez le fond blanc.

Chart.plugins.register({
    afterRender: function(c) {
        console.log("afterRender called");
        var ctx = c.chart.ctx;
        ctx.save();
        // This line is apparently essential to getting the
        // fill to go behind the drawn graph, not on top of it.
        // Technique is taken from:
        // https://stackoverflow.com/a/50126796/165164
        ctx.globalCompositeOperation = 'destination-over';
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, c.chart.width, c.chart.height);
        ctx.restore();
    }
});

Veuillez visiter (et voter) la réponse liée à la question posée.

1
Anne Gunn