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!