Canvas Flot使用与浏览器中不同的背景色渲染png图像

我在将flot制作的HTML5画布保存为图像格式时遇到了一个问题。见下图

这是我从同一个图形的两个不同格式副本（使用相同代码）拼接在一起的图像。左侧是浏览器中的画布，呈现为白色。右边是当我使用

getCanvas（）

code将数据保存到图像形式时，它被渲染为灰色。我无法解释颜色的差异，也无法修复它。你认为问题出在哪里

更多信息

//JS side:
var plot = $.plot($("#plot"), flotData, flotOptions);
var canvas = plot.getCanvas();
var data = canvas.toDataURL("image/png");

//I then pass data via dynamically created JS-form to a PHP script
{code ommitted, but essentially $imageData = data}

//once in PHP script:
$parts = explode(',', $imageData);
$data = base64_decode($parts[1]);


header('Content-Type: image/png');
header('Content-Length: '.strlen($data));

// Output the actual image data //renders with gray instead of white(!!)
echo $data;

观察结果

发现我可以在flot中设置背景色：

grid:{“backgroundColor”：{“colors”：[“#FFF”，“#EEE”]}

但它只会更改栅格内部的颜色，栅格侧面（轴）的垂直边线在浏览器格式副本中为白色时仍具有灰色背景

另一种攻击方法是找到一种“在现有画布上绘制flot图表”的方法。制作画布，上色，传递给弗洛特。（不知道是否可能）

**更新**

---

我在这里遇到的问题是“透明度”。alpha通道上0的透明像素获得了我想要避免的这种颜色。

啊，所以答案是透明。当我试图将图像导出为“jpeg”并且边框颜色不同（黑色）时，一定是有什么东西为我点击了。对于栅格外部的边界，PNG的alpha通道为0。因此，其他程序可以在那里随意编写东西

我的解决方案的灵感来自谷歌搜索“canvas png transparency”

我的代码是这样的：

var image = context.getImageData(0, 0, canvas.width, canvas.height);

for(var i=0; i < image.data.length; i+=4)
{ 
    if (image.data.[i+3] == 0)  //if transparent
    {
        image.data[i] = 255;    //blast the mfkr with full on white!
        image.data[i+1] = 255;
        image.data[i+2] = 255;
        image.data[i+3] = 255;
    }
}

var image=context.getImageData（0，0，canvas.width，canvas.height）；
对于（变量i=0；i

---

很粗糙，但确实有用

能否显示其余的绘图配置？我在这里做了一个快速测试：并且不能重现这个问题。事实上。。。也许是别的什么地方出了问题。请看上面我的配置。困扰我的背景颜色是E3，对代码库的搜索显示没有这样的字符串，不管是大写还是非大写。当我使用canvas.toDataURL（“image/jpeg”）时，背景色是黑色的！当我做你的小提琴时，我也得到了白色的背景。将图像发送到服务器部分会导致这样的背景转换。。。我将图像发送到服务器，服务器在那里渲染图像并通过PHP显示在屏幕上