使用 HTML5 Canvas 显示浮点数的矩阵/图像答案

【问题标题】：Display matrix/image of floats using HTML5 Canvas使用 HTML5 Canvas 显示浮点数的矩阵/图像
【发布时间】：2011-09-22 18:57:09
【问题描述】：

我正在寻找一种使用 HTML5 画布元素来显示浮动图像的方法。考虑一个灰度图像，其中值不是 8 位或 16 位整数，而是浮点数（或双精度数）。我想要一个 javascript/html5 解决方案来使用颜色图在浏览器中显示图像。此外，我希望用户能够以交互方式调整最小值和最大值。

这种操作在 ImageJ 等科学成像软件中很常见，但我还没有找到 javascript/html5 的解决方案。 Pixastic 在这方面似乎走在了正确的轨道上，但更倾向于彩色图像处理。

任何想法，在此先感谢

【问题讨论】：

好吧，在画布中你会得到 8 位 RGB 像素，所以我认为唯一的“想法”是将浮点值映射为 8 位数字，但你认为合适。
@Pointy，看来 Hernan 正在寻找一些开箱即用的解决方案。
@unclenorton 好吧，我想可能有这样的事情，但是从浮点域到 8 位 RGB 颜色空间的值的映射将完全取决于数据的性质，以及所需的可视化效果。
确实，我正在寻找开箱即用的东西，或者至少几乎可以使用。数据的性质并不重要。大多数查找表以下列方式工作：（1）创建一个 256x3 数组（每行是一个 rgb 集），（2）线性（或使用伽马）映射您的数字从最小值到最大值到 0-255 并舍入 ( 3）相应地改变像素颜色。虽然理论上很容易，但我不确定是否能够快速、跨浏览器实现这一点。这就是我正在寻找图书馆的方式。抱歉，如果问题导致任何混淆。

【解决方案1】：

我想我也有同样的工作需要。首先我会说我不提供库解决方案，但我会告诉你我是如何编写代码的。

我选择使用画布线性渐变制作颜色图画布。

要在我的图片上应用这个渐变，我只需计算我需要表示的值的最小值/最大值，然后根据我的线性渐变搜索每个值对应的颜色。

我的图片已使用 drawImage 包含在画布中。

然后我使用数据数组上的 canvasPixel 操作更改了每个像素的颜色。

对于交互式移动颜色图，我选择使用 JqueryUi 滑块。

所有这些都链接到我的代码上，这有点长。

好吧，我添加了一些更复杂的东西，因为用户可以使用 colorPicker Jquery 插件修改 linearGradient 的颜色，但它或多或少也是你想要的？

希望我能回答你的问题。祝你好运。

【讨论】：