Question

我正在开发一个javascript应用程序，它以.cube格式读取3D颜色查找表，解析数据并从这些值创建ImageData对象，最后将其应用于另一个图像。

我在使用javascript将3D CLUT转换为imageData对象时遇到了问题。

流程如下：我有.cube格式的3D颜色查找表。

.cube文件的示例：

# Created by: Author.name
# some info
# another info

LUT_3D_SIZE 17

0.059631 0.016327 0.003510
0.108398 0.020386 0.004089
.
. after few thousand lines
.
0.908539 0.965302 0.953644
0.951721 0.981812 0.963562

我解析了.cube文件并获得了包含所有值的数组并将其放入Uint8ClampedArray中，因此我可以创建ImageData对象并最终使用putImageData（）函数将其绘制到画布中。

代码看起来像这样：

...

var result = parseData(data);
var testCanvas = document.getElementById("testCanvas");
var ctxTest = testCanvas.getContext("2d");

var width = Math.sqrt((result.data.length/4));
var height = Math.sqrt((result.data.length/4));

var uintc8 = new Uint8ClampedArray(result.data);
var newImage = new ImageData(uintc8, width ,height);

ctxTest.putImageData(newImage,0,0);

当我尝试使用64 * 64 * 64大小的查找表运行此代码时，一切正常，ImageData创建成功并生成图像内容。但是当我尝试使用其他大小的LUT（17或33或5 ......）时，我收到了错误：

＆＃34;无法构建＆＃39; ImageData＆＃39;：输入数据长度不是a （4 *宽度）的倍数。＆＃34;

如果我尝试更改宽度和高度值，我会收到错误：

＆＃34;无法构建＆＃39; ImageData＆＃39;：输入数据长度不相等到（4 *宽*高）。＆＃34;

所以我现在有点困惑......只有当我没有得到错误的例子是我放

var width = result.data.length; var height = 1; 但是，当然，这不起作用，因为我的身高达到1px ......

那么，如何使用64 * 64 * 64以外的LUT？这篇文章对我来说非常有帮助......

How to use LUT with JavaScript?

谢谢！

在javascript中将3D颜色LUT转换为ImageData

0 个答案: