如何使用 blob 和文件保护程序将 Chart JS 图表保存为没有黑色背景的图像？

Question

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

这里我使用Chart JS(v2.5.0) 渲染图表。当我尝试使用 Canvas 到 Blob 转换器和 filesaver.js 导出图表时，我得到了黑色背景。那么如何获得具有自定义背景颜色（最好是白色）的图像？

Answer 1

如果你想要自定义背景颜色，那么你必须用你喜欢的颜色绘制背景，你可以这样做......

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);
    }
});

演示

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

Answer 2

正如我在对已接受答案的评论中所述，beforeDraw 事件导致多次调用 fillRect 代码让我感到困扰。（据我所知，每个数据点一次。）

但是在调用任何其他事件时，我无法使该方法起作用。但是，我只是采用了中描述的编码方法，并将其插入到在 afterRender 事件中注册到运行的代码中，它做了我想要的：运行一次并离开后台白.

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:
        // 
        ctx.globalCompositeOperation = 'destination-over';
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, c.chart.width, c.chart.height);
        ctx.restore();
    }
});

请访问（并投票）其他已发布问题的链接答案。

Answer 3

在 React 中，使用 react-chartjs-2， 我可以像这样设置图表的背景颜色：

const plugin = {
    beforeDraw: (chartCtx) => {
      const ctx = chartCtx.canvas.getContext('2d');
      ctx.save();
      ctx.globalCompositeOperation = 'destination-over';
      ctx.fillStyle = 'white';
      ctx.fillRect(0, 0, chartCtx.width, chartCtx.height);
      ctx.restore();
    }
};

然后将插件添加到图表中：

<Line ref={chartRef} data={chartData} options={options} plugins={[plugin]} />

文档参考：https://www.chartjs.org/docs/latest/configuration/canvas-background.html#color

将图表另存为图像：

我创建了一个使用 toBase64Image 函数提取图像的函数。我将此功能附加到一个按钮，以帮助我在单击按钮时下载图表图像。

function downloadImage(){
    const link = document.createElement("a");
    link.download = `${chart.name || 'chart'}.jpg`
    link.href = chartRef.current.toBase64Image('image/jpeg', 1);
    link.click();
  }

如何使用 blob 和文件保护程序将 Chart JS 图表保存为没有黑色背景的图像？

How to save Chart JS charts as image without black background using blobs and filesaver?

blob

html5-canvas

chart.js

filesaver.js