Converting 3D color LUT to ImageData in javascript

952 Views Asked by At

I am working on a javascript app that reads 3D color lookup table in .cube format, parses data and creates ImageData object from these values and in the end, applies it to another image.

I am having problems with converting 3D CLUT to imageData object in javascript.

Process goes like this: I have 3D color lookup table in .cube format.

example of .cube file:

# 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

I parsed .cube file and got array with all values and put it into Uint8ClampedArray, so I could create ImageData object and finaly, draw it into canvas with putImageData() function.

Code looks something like this:

...

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

When I try to run this code with 64*64*64 sized lookup table, everything works great, ImageData is created successfully and image content is generated. But when I try to use some other size of LUT (17 or 33 or 5...) I'm getting an error:

"Failed to construct 'ImageData': The input data length is not a multiple of (4 * width)."

And if I try to change width and height values I get error:

"Failed to construct 'ImageData': The input data length is not equal to (4 * width * height)."

So I'm little confused right now... Only example when I didn't get an error was when I put

var width = result.data.length; var height = 1; But of course, that didn't work because I got 1px height....

So, how to get this to work with LUTs other than 64*64*64? This post was very helpful to me begin with...

How to use LUT with JavaScript?

Thanks!

0

There are 0 best solutions below