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

【问题标题】：Flot renders png image with a different background color than it does in browserFlot 使用与浏览器中不同的背景颜色渲染 png 图像
【发布时间】：2014-08-11 21:51:16
【问题描述】：

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

这是我从同一张图的两个不同再现（使用相同的代码）拼接在一起的图像。左侧是浏览器中的画布，呈现为白色。右侧，是当我使用getCanvas() 代码将数据保存为图像形式并呈现灰色时。我无法解释颜色的差异，也无法修复它。您认为是什么问题？

更多信息

//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" ]}}.

但是它只改变了网格内部的颜色，并且在浏览器呈现为白色时，网格两侧的垂直边线（轴）仍然具有灰色背景。

解决此问题的另一种方法是找到一种“在现有画布上绘制浮动图表”的方法。制作画布，着色，传递给浮动。（不知道能不能）

** 更新！ **

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

【问题讨论】：

您能展示其余的绘图配置吗？我在这里做了一个快速测试：plnkr.co/edit/wnvT3Xln20h4DKkWcamR?p=preview 并且无法重现该问题。
确实......也许还有其他问题。看我上面的配置
困扰我的背景颜色是 E3E3E3，搜索代码库没有发现这样的字符串，无论是否大写。
有趣。当我使用canvas.toDataURL("image/jpeg")时，背景颜色是黑色！
当我按照你的小提琴演奏时，我也得到了白色背景。这是将图像发送到服务器部分导致这样的背景转换......我将图像发送到服务器，服务器在那里渲染并通过 PHP 显示在屏幕上

标签： canvas flot

【解决方案1】：

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

我的解决方案受到http://www.patrick-wied.at/blog/how-to-create-transparency-in-images-with-html5canvas 的启发，我通过谷歌搜索“canvas png透明度”找到了它。

我的代码是这样的：

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

粗制滥造，但能胜任！

【讨论】：