使用HTML5 Canvas显示浮动的矩阵/图像

时间:2011-06-25 23:08:48

标签: javascript image html5 canvas visualization

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

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

任何想法,提前谢谢

1 个答案:

答案 0 :(得分:0)

我认为我有同样的工作需要。 首先我会说我不提供库解决方案,但我告诉你我是如何编码的。

我选择使用canvas linear Gradient制作色彩图画布。

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

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

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

对于交互式移动色彩映射,我选择使用JqueryUi滑块。

所有这些都与我的代码有关,而且有点长。

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

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