0

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!

ChrisM
  • 1,576
  • 6
  • 18
  • 29
Josip Lukacevic
  • 300
  • 3
  • 8
  • 1
    have you checked `width` and `height`? are they integers? if not, then I'd guess, that something is wrong with your `parseData()` function. – Thomas Sep 16 '17 at 22:06
  • @Thomas yes, you are right. They need to be integers (actually type long). But then, how to input float values? For example, In 17*17*17 size, I believe width should be 70.097956... (btw, I am not 100% if I use the correct formlua for getting width) – Josip Lukacevic Sep 16 '17 at 22:19
  • no, `width` and `height` should to be a multiple of your `LUT_3D_SIZE` and depend on the Array built in `parseData()`. You have 17 slices of 17x17px images. And you need to arrange these slices in columns and rows. And you need to put each pixel at the proper index in the Array, depending on how many columns you create, and depending on the `LUT_3D_SIZE`. – Thomas Sep 16 '17 at 22:42
  • 1
    Actually, If you use only a single column *(`width` === `LUT_3D_SIZE`)* this should work out. – Thomas Sep 16 '17 at 22:44
  • @Thomas Thanks man, that did it! Saved my day(s). Can you post it in answer so I can select it for correct answer? Cheers! – Josip Lukacevic Sep 16 '17 at 23:15

0 Answers0