javascript - 如何将带有 Canvas 的 Canvas 保存为没有黑色背景的 Blob ？

Question

我正在尝试从 charts.js 保存图表，但它保存的是黑色背景，我不知道如何将该背景更改为透明或白色。

我正在使用 Canvas to blob和 FileSaver

这是我的脚本

$("#download").click(function() {
        var canvas = document.getElementById("canvas");
        canvas.toBlob(function(blob) {
            saveAs(blob, "grafica.png");
        });
    });

Answer 1

如果您不想弄乱图表的 Canvas 本身，您可以使用 offscreen canvas并在那里绘制背景。

const canvasWithBackground = document.createElement('canvas');
canvasWithBackground.width = canvas.width;
canvasWithBackground.height = canvas.height;

const ctx = canvasWithBackground.getContext('2d')!;
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(canvas, 0, 0);

canvasWithBackground.toBlob(function(blob) {
    saveAs(blob, "grafica.png");
});