Question

我是图像处理的新手。

我想使用JavaScript将效果应用于使用LUT（LookUp Tables）或相应的查找PNG的图像，如下所示：

enter image description here

我搜索了很多内容，找不到能够描述使用LUT进行像素转换的确切过程的文章或资源。

我找到了一篇很好的文章here，它描述了1D和3D LUT以及它们之间的差异。但对我来说仍然不完全清楚。

我想要像this这样的东西，这是为iOS完成的。

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

更新

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

Answer 1

我也是这个话题的新手，但我希望它能帮到我迄今为止所发现的内容。您的图像（LUT）是3D阵列的表示，想象一下64x64x64立方体。该表示为2D，一个平面为64x64平方。你需要64个这个平面，这就是png中有8x8个方块的原因。如果仔细观察，左上方的X轴为红色（RGB为R），Y轴为红色（G）。蓝色（B）是Z轴（我想象它向上），它不能用2D表示，因此它出现在接下来的64x64方格中。在最后（右下）的方块上，您可以看到它主要是蓝色，红色和绿色坐标为0。

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

步骤：

遍历原始图像的像素。在一次迭代中，您将拥有原始图像的一个像素。获取该像素的R，G，B值。
将值除以4，因此您的值将小于64。
从LUT获取相应的像素，就好像它是64x64x64多维数据集一样。因此，如果RGB =（255,0,255）在原始像素上，则将其除以得到（63,0,63），然后检查B值，以获得png上相应的方格，这将是右下方的方格（在b = 63的情况下），得到它的r，g =（63,0）像素，在你的png图像上是紫色的。

我现在检查了android，用java代码，在我看来它足够快。以下是我编写的代码，我希望它足以将其移植到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。

Answer 2

我正在尝试在c ++中做类似的事情。 3D LUT具有3列值，通常在0到1之间。列分别为r g b，它们表示值的映射。如果打开其中一个大小为nxnxn的文件，则会将每个值读入其各自的R数组或G数组或B数组。然后，要在内部重新创建映射，请使用double / float键和值迭代并填充rgb映射

for every b
    for every g
        for every r
            // r g and b are indices
            index = b * n^2 + g * n + r
            Rmap.push((r + 1)/n, Rarray[index])
            // Same for g and b
            Gmap.push((g + 1)/n, Garray[index]
            Bmap.push((b + 1)/n, Barray[index]

一旦有了映射，就可以将查找应用于图像中的每个像素。假设图片的最大颜色为255，那么您获取每个像素的（r，g，b）/ 255并应用查找，然后再转换为* 255。据我所知，计算无法查找的值的惯例是执行三线性插值。我还没有取得太大的成功，但这是我的两分钱。

如何在JavaScript中使用LUT？

2 个答案: