𝗛𝗶𝗴𝗵-𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗖𝗹𝗶𝗲𝗻𝘁-𝗦𝗶𝗱𝗲 𝗜𝗺𝗮𝗴𝗲 𝗣𝗿𝗼𝗰𝗲𝘀𝘀𝗶𝗻𝗴
ब्राउज़र में इमेज प्रोसेस करना अब एक मानक आवश्यकता बन गया है। आप फोटो एडिटर, एसेट टूलकिट, या एक्सेसिबिलिटी फ़िल्टर बना सकते हैं। अपने UI को रिस्पॉन्सिव बनाए रखने के लिए, आपको लो लेटेंसी (low latency) की आवश्यकता होती है।
एक सरल कार्य कलर इन्वर्जन (color inversion) है। इसका अर्थ है RGB वैल्यूज़ को उनके नेगेटिव में बदलना। यदि आप 4K इमेज पर मानक दृष्टिकोण का उपयोग करते हैं, तो आप हार्डवेयर बॉटलनेक्स (hardware bottlenecks) का सामना करेंगे।
समस्या: साधारण इटरेशन (Naive Iteration)
अधिकांश डेवलपर्स getImageData() मेथड का उपयोग करते हैं। यह एक Uint8ClampedArray लौटाता है। यह ऐरे पिक्सेल को रेड, ग्रीन, ब्लू और अल्फा (RGBA) चैनल्स के रूप में स्टोर करता है।
एक मानक लूप ऐसा दिखता है:
- हर एक बाइट के माध्यम से लूप करें।
- प्रत्येक कलर वैल्यू को 255 से घटाएं।
- अल्फा चैनल को छोड़ दें।
यह छोटी इमेज के लिए काम करता है। लेकिन 4K एसेट्स के लिए यह विफल हो जाता है। एक 4K इमेज में 8 मिलियन से अधिक पिक्सेल होते हैं। एक मानक लूप 33 मिलियन से अधिक अलग-अलग राइट्स (writes) करता है। यह मेन थ्रेड को ब्लॉक कर देता है, जिससे ब्राउज़र में अटकने (stuttering) की समस्या होती है और फ्रेम्स ड्रॉप होने लगते हैं।
समाधान: 32-बिट बफ़र मैनिपुलेशन (32-Bit Buffer Manipulation)
आप पिक्सेल को चार अलग-अलग चैनल्स के रूप में मानना बंद कर सकते हैं। इसके बजाय, डेटा बफ़र के ऊपर एक Uint32Array ओवरले करें।
32-बिट व्यू का उपयोग करके, आप R, G, B, और A को एक सिंगल इंटीजर (integer) में ग्रुप कर देते हैं। आपका लूप अब 33 मिलियन के बजाय केवल 8.2 मिलियन इटरेशन करता है। आप चार के बजाय प्रति पिक्सेल एक ही ऑपरेशन प्रोसेस करते हैं।
बिटवाइज़ XOR के माध्यम से तेज़ कलर इन्वर्जन
अल्फा को छुए बिना रंगों को इन्वर्ट करने के लिए, बिटवाइज़ XOR ऑपरेटर (^) का उपयोग करें। मास्क 0x00FFFFFF का उपयोग करें।
यह कैसे काम करता है:
- मास्क केवल कलर बिट्स को टारगेट करता है।
- अल्फा बिट्स वही रहते हैं।
- CPU इसे एक सिंगल साइकिल में प्रोसेस करता है।
परिणाम:
- 1080p एसेट्स: 3.8x तेज़।
- 2K टेम्पलेट्स: 4.1x तेज़।
- 4K वॉलपेपर्स: 4.4x तेज़।
प्रो टिप: Web Workers का उपयोग करें यदि आप कई हाई-रिज़ॉल्यूशन फ़ाइलों को प्रोसेस करते हैं, तो 32-बिट ऑपरेशन्स भी UI को धीमा कर सकते हैं। लॉजिक को Web Worker में ले जाएँ। बफ़र पास करने के लिए Transferable Objects का उपयोग करें। यह डेटा कॉपी करने से बचाता है और आपके मेन थ्रेड को फ्री रखता है।
भारी लूप का उपयोग करना बंद करें। लीन (lean) और तेज़ इमेज पाइपलाइन बनाने के लिए 32-बिट वर्ड्स और बिटवाइज़ फ्लैग्स का उपयोग करें।