javascript कैसे जावास्क्रिप्ट के साथ LUT का उपयोग करें?



image-processing lookup-tables (1)

मैं इमेज प्रोसेसिंग के लिए नया हूँ

मैं LUTs (लुकअप टेबल्स) या संबंधित लुकअप पीएनजी का उपयोग कर छवियों पर प्रभाव लागू करने के लिए जावास्क्रिप्ट का उपयोग करना चाहता हूं, ऐसा कुछ:

मैंने बहुत कुछ किया है और एक लेख या कोई संसाधन नहीं मिल सकता है जो LUTs का उपयोग करके पिक्सेल रूपांतरण की सटीक प्रक्रिया का वर्णन करेगा।

मुझे यहां एक अच्छा लेख मिला है , जो 1 डी और 3 डी एलयूटी और उनके बीच का अंतर का वर्णन करता है। लेकिन यह अभी भी मेरे लिए पूरी तरह से स्पष्ट नहीं है

मुझे ऐसा कुछ चाहिए, जो आईओएस के लिए किया जाता है।

पी एस कृपया छवि फिल्टरिंग लिबी के बारे में लिंक्स / उत्तर पोस्ट नहीं करें, जो प्रभाव के लिए या फ़िल्टर के लिए कनवलोल्यूशन मैट्रिक्स का उपयोग कर रहे हैं।

अद्यतन करें:

आखिरकार! मुझे जवाब मिल गया है, काफ़ी देर तक। मैंने GitHub में एक सार बनाया है, जिसे आप यहां पा सकते हैं


मैं इस विषय के लिए भी नया हूँ, लेकिन मुझे आशा है कि यह मेरी मदद करता है जो मैंने अभी तक पाया है। आपकी छवि (एलयूटी) 3 डी सरणी का एक प्रतिनिधित्व है, एक 64x64x64 घन की कल्पना करें। यह प्रतिनिधित्व 2 डी में है, एक विमान 64x64 वर्ग है। आपको इस विमान के 64 टुकड़े चाहिए, यही कारण है कि पीएनजी में 8x8 वर्ग हैं। यदि आप सावधानी से देखते हैं, तो ऊपरी बाएं स्क्वायर में एक्स अक्ष पर आरजीबी (लाल रंग का आर) और वाई अक्ष पर हरा (जी) है। नीला (बी) Z अक्ष है (मैं इसे ऊपर की तरफ समझता हूं), जिसे 2 डी में प्रस्तुत नहीं किया जा सकता, इसलिए यह अगले 64x64 वर्गों पर आता है। पिछले (निचले दाएं) वर्ग पर आप देख सकते हैं कि यह ज्यादातर नीला है, जहां लाल और हरे रंग के निर्देशांक 0 हैं।

तो अगला सवाल यह है कि इस LUT के साथ एक छवि प्रोजेक्ट कैसे करें। मैंने जावा में इसे बाहर की कोशिश की है, मेरी राय में आपको कुछ जानकारी खोनी होगी क्योंकि 64x64x64 256x256x256 से कम है, इस मामले में, आपको प्रत्येक पिक्सेल रंग मान 4 से विभाजित करना होगा।

कदम:

  1. अपनी मूल छवि के पिक्सेल के माध्यम से फिराना एक पुनरावृत्ति में आपके पास मूल चित्र का एक पिक्सेल होगा। उस पिक्सेल के आर, जी, बी मान प्राप्त करें
  2. मूल्यों को चार से विभाजित करें, तो आपके पास 64 से कम मूल्य होगा।
  3. अपने LUT से संबंधित पिक्सेल को प्राप्त करें, जैसे कि यह 64x64x64 घन था। इसलिए यदि आरजीबी = (255,0,255) मूल पिक्सेल पर था, इसे प्राप्त करने के लिए (63,0,63) से विभाजित करते हुए, बी मान की जांच करें, ताकि पीएनजी पर संबंधित वर्ग प्राप्त कर सकें, जो कि निचले सही होगा (बी = 63 के मामले में), और आर, जी = (63,0) पिक्सेल प्राप्त करें, जो आपकी पीजीजी छवि पर बैंगनी है।

मैं अब एंड्रॉइड पर जाव कोड के साथ चेक किया है, मेरी राय में इसकी तेज़ी से पर्याप्त है नीचे मैंने लिखा है कोड है, मुझे आशा है कि जावास्क्रिप्ट को इसे बंद करने के लिए पर्याप्त है। (मुझे उम्मीद है कि टिप्पणियां समझने के लिए पर्याप्त हैं)

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 ;
}

अब मैंने सफलतापूर्वक जावास्क्रिप्ट में भी लागू किया है, 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/ लूट छवि बाइट कोड में है, इसके लिए क्षमा करें

यह कोड केवल 64x64x64 3DLUT चित्रों के लिए लागू होता है पैरामीटर अलग-अलग हैं यदि आपके LUT में अन्य आयाम हैं; / 4 , * 64 , % 8 , / 8 को अन्य आयामों के लिए बदला जाना चाहिए, लेकिन इस प्रश्न के दायरे में एलयूटी 64x64x64 है।





lookup-tables