javascript - 如何在JavaScript中使用LUT？

我是图像处理的新手。

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

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

我找到了一篇不错的文章here，它描述了1D和3D LUT以及它们之间的区别。但是对我来说仍然不是很清楚。

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

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

更新:

最后!感谢@abbath，我得到了答案。我已经在GitHub中创建了要点，您可以在其中找到here。

最佳答案

我也是这个话题的新手，但我希望它能对我到目前为止发现的内容有所帮助。您的图像(LUT)是3D阵列的表示，想象一下64x64x64立方体。此表示形式为2D，一个平面为64x64正方形。您需要此平面的64块，这就是png在其中具有8x8正方形的原因。
如果仔细看，左上 Angular 的正方形在X轴上有红色(RGB的R)，在Y轴上有绿色(G)。蓝色(B)是Z轴(我想象它是向上的)，无法以2D表示，因此它出现在接下来的64x64正方形上。在最后一个(右下)正方形上，您可以看到它主要是蓝色的，其中红色和绿色坐标为0。

因此，下一个问题是如何使用此LUT投影图像。我已经在Java中进行了尝试，我认为您将不得不丢失一些信息，因为64x64x64远远小于256x256x256，在这种情况下，您必须将每个像素颜色值除以4。

步骤:

遍历原始图像的像素。在一次迭代中，您将拥有原始图像的一个像素。获取该像素的R，G，B值。

将值除以四，因此您的值小于64。

从LUT中获取相应的像素，就好像它是64x64x64立方体一样。因此，如果RGB =(255,0,255)在原始像素上，则将其除以得到(63,0,63)，然后检查B值，以在png上获得相应的正方形，该正方形将是右下 Angular 的(在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。

关于javascript - 如何在JavaScript中使用LUT？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24910234/