javascript - 如何在 JavaScript 中使用 LUT？

Question

我是图像处理的新手。

我想使用 JavaScript 对使用 LUT(查找表)或相应的查找 PNG 的图像应用效果，如下所示:

我在谷歌上搜索了很多，但找不到一篇文章或任何资源来描述使用 LUT 进行像素转换的确切过程。

我找到了一篇不错的文章 here ，其中描述了 1D 和 3D LUT 以及它们之间的差异。但对我来说还不是很清楚。

我想要类似 this 的东西，这是为 iOS 完成的。

附言请不要发布有关图像过滤库的链接/答案，这些库将卷积矩阵用于效果或过滤器。

更新:

终于!感谢@abbath，我得到了答案。我在 GitHub 中创建了一个要点，你可以找到它 here .

Answer 1

我也是这个话题的新手，但我希望它对我目前所发现的有所帮助。您的图像(LUT)是 3D 阵列的表示，想象一个 64x64x64 的立方体。这种表示是二维的，一个平面是一个 64x64 的正方形。你需要这架飞机的 64 block ，这就是为什么 png 中有 8x8 个正方形。如果仔细观察，左上角的方 block 在 X 轴上有红色(RGB 的 R)，在 Y 轴上有绿色(G)。蓝色 (B) 是 Z 轴(我想象它向上)，它不能用 2D 表示，所以它出现在接下来的 64x64 正方形上。在最后一个(右下角)正方形中，您可以看到它主要是蓝色，其中红色和绿色坐标为 0。

那么下一个问题就是如何用这个LUT来转换一张图片。我已经在 J​​ava 中尝试过了，在我看来你将不得不丢失一些信息，因为 64x64x64 远小于 256x256x256，在这种情况下，你必须将每个像素颜色值除以 4。

步骤:

1. 遍历原始图像的像素。在一次迭代中，您将拥有原始图像的一个像素。获取该像素的 R、G、B 值。
2. 将这些值除以 4，得到的值将小于 64。
3. 从您的 LUT 中获取相应的像素，就好像它是一个 64x64x64 的立方体一样。所以如果原始像素上的RGB=(255,0,255)，则除以得到(63,0,63)，然后检查B值，得到png上对应的正方形，即右下角(在 b=63 的情况下)，并获取它的 r,g=(63,0) 像素，它在您的 png 图像上呈紫色。

我现在用 java 代码检查了 android，我认为它足够快。下面是我写的代码，我希望它足以将它移植到 javascript。 (希望评论够看懂)

public Bitmap applyEffectToBitmap(Bitmap src, Bitmap lutbitmap) {
    //android specific code, storing the LUT image's pixels in an int array
    int lutWidth = lutBitmap.getWidth();
    int lutColors[] = new int[lutWidth * lutBitmap.getHeight()];
    lutBitmap.getPixels(lutColors, 0, lutWidth, 0, 0, lutWidth, lutBitmap.getHeight());

    //android specific code, storing the source image's pixels in an int array
    int srcWidth = src.getWidth();
    int srcHeight = src.getHeight();
    int[] pix = new int[srcWidth * srcHeight];

    src.getPixels(pix, 0, srcWidth, 0, 0, srcWidth, srcHeight);

    int R, G, B;
    //now we can iterate through the pixels of the source image
    for (int y = 0; y < srcHeight; y++){
        for (int x = 0; x < srcWidth; x++) {
            //index: because the pix[] is one dimensional
            int index = y * srcWidth+ x;
            //pix[index] returns a color, we need it's r g b values, thats why the shift operator is used
            int r = ((pix[index] >> 16) & 0xff) / 4;
            int g = ((pix[index] >> 8) & 0xff) / 4;
            int b = (pix[index] & 0xff) / 4;

            //the magic happens here: the 3rd step above: blue pixel describes the 
            //column and row of which square you'll need the pixel from
            //then simply add the r and green value to get the coordinates 
            int lutX = (b % 8) * 64 + r;
            int lutY = (b / 8) * 64 + g;
            int lutIndex = lutY * lutWidth + lutX;


            //same pixel getting as above, but now from the lutColors int array
            R = ((lutColors[lutIndex] >> 16) & 0xff);
            G = ((lutColors[lutIndex] >> 8) & 0xff);
            B = ((lutColors[lutIndex]) & 0xff);


            //overwrite pix array with the filtered values, alpha is 256 in my case, but you can use the original alpha
            pix[index] = 0xff000000 | (R << 16) | (G << 8) | B;
        }
    }
    //at the end of operations pix[] has the transformed pixels sou can set them to your new bitmap
    //some android specific code is here for creating bitmaps
    Bitmap result = Bitmap.createBitmap(srcWidth, srcHeight, src.getConfig());
    result.setPixels(pix, 0, srcWidth, 0, 0, srcWidth, srcHeight);
    return result ;
}

现在我也已经在 javascript 中成功实现了，检查是否使用了 Math.floor() 函数:

for (var i=0;i<imgData.data.length;i+=4){
    var r=Math.floor(imgData.data[i]/4);
    var g=Math.floor(imgData.data[i+1]/4);
    var b=Math.floor(imgData.data[i+2]/4);    
    var a=255;


    var lutX = (b % 8) * 64 + r;
    var lutY = Math.floor(b / 8) * 64 + g;
    var lutIndex = (lutY * lutWidth + lutX)*4;

    var Rr =  filterData.data[lutIndex];
    var Gg =  filterData.data[lutIndex+1];    
    var Bb =  filterData.data[lutIndex+2];

    imgData.data[i] = Rr;
    imgData.data[i+1] = Gg;
    imgData.data[i+2] = Bb;
    imgData.data[i+3] = 255;

}

在这里查看:http://jsfiddle.net/gxu080ve/1/ lut 图像是字节码，抱歉。

此代码仅适用于 64x64x64 3DLUT 图像。如果您的 LUT 具有其他维度，则参数会有所不同； /4,*64,%8,/8对于其他维度必须改，但是在这个问题的范围 LUT 是 64x64x64。