添加背景到透明图像

Question

我需要将在画布中创建的图表导出为图像文件。我设法做到了，但图像是透明的（没有背景）。我的问题是，有没有办法用代码为我从画布中获得的现有图像添加背景颜色？

示例：

浏览器中的画布：

导出为.png时的画布：

Answer 1

您有多种方法可以完成任务。

到目前为止，最简单的方法是在开始绘制图表之前用背景颜色填充整个画布。 提示：您不显示代码，但如果可能，请执行此简单的解决方案。 ; =）

context.fillStyle='white';
context.fillRect(0,0,canvas.width,canvas.height)

如果你不能在开始之前填写，你还有一些选择。

您可以将图表保存到另一个画布，用背景颜色填充整个主画布，然后将保存的图表重新绘制回主画布。

// create a second canvas and draw the chart onto it
var secondCanvas=document.createElement('canvas');
var cctx=secondCanvas.getContext('2d');
secondCanvas.width=canvas.width;
secondCanvas.height=canvas.height;
cctx.drawImage(mainCanvas,0,0);

// fill the main canvas with a background
context.fillStyle='white';
context.fillRect(0,0,canvas.width,canvas.height)

// redraw the saved chart back to the main canvas
context.drawImage(secondCanvas,0,0);

您可以使用合成来使新图纸在现有像素后面 。绘制整个背景，它将出现在现有图表的后面。

// set compositing to draw all new pixels (background) UNDER
// the existing chart pixels
context.globalCompositeOperation='destination-over';

// fill the main canvas with a background
context.fillStyle='white';
context.fillRect(0,0,canvas.width,canvas.height)

// always clean up ... reset compositing to default
context.globalCompositeOperation='source-over';

Answer 2

无需使用JavaScript，只需使用CSS为图像提供背景色。

<style>
    img {
        background-color: black;
    }
</style>
<img src="...">

另请参阅此JSFiddle：https://jsfiddle.net/3jch7z94/1/