如何在JavaScript中使用LUT？

Question

我是图像处理的新手.

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

我google了很多,找不到一篇文章或任何资源来描述使用LUT进行像素转换的确切过程.

我在这里找到了一篇很好的文章,它描述了1D和3D LUT以及它们之间的差异.但它对我来说仍然不是很清楚.

我想是这样,这是为iOS完成.

PS请不要发布关于图像过滤库的链接/答案,图像过滤库使用卷积矩阵作为效果或过滤器.

更新:

最后!@abbath,我得到了答案.我在GitHub中创建了一个要点,你可以在这里找到.

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.

步骤:

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图像上是紫色的.

我现在检查了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.