हाय-परफॉर्मन्स क्लायंट-साइड इमेज प्रोसेसिंग

ब्राउझरमध्ये इमेज प्रोसेस करणे आता एक मानक आवश्यकता बनली आहे. तुम्ही फोटो एडिटर, ॲसेट टूलकिट किंवा ॲक्सेसिबिलिटी फिल्टर्स तयार करू शकता. तुमचे UI रिस्पॉन्सिव्ह ठेवण्यासाठी, तुम्हाला कमी लॅटन्सी (low latency) आवश्यक आहे.

कलर इन्व्हर्जन (color inversion) हे एक साधे काम आहे. याचा अर्थ RGB व्हॅल्यूज त्यांच्या निगेटिव्ह व्हॅल्यूजमध्ये बदलणे असा होतो. जर तुम्ही 4K इमेजवर मानक पद्धत वापरली, तर तुम्हाला हार्डवेअर बॉटलनेक्सचा (hardware bottlenecks) सामना करावा लागेल.

समस्या: नेव्ह इटरेशन (Naive Iteration) बहुतेक डेव्हलपर्स getImageData() मेथड वापरतात. हे Uint8ClampedArray रिटर्न करते. ही ॲरे पिक्सेल्सना Red, Green, Blue आणि Alpha (RGBA) चॅनेल म्हणून साठवते.

एक स्टँडर्ड लूप असा दिसतो:

हे लहान इमेजसाठी काम करते. परंतु 4K ॲसेट्ससाठी ते अपयशी ठरते. 4K इमेजमध्ये 8 दशलक्षाहून अधिक पिक्सेल्स असतात. एक स्टँडर्ड लूप 33 दशलक्षाहून अधिक स्वतंत्र 'writes' करते. यामुळे मेन थ्रेड ब्लॉक होतो. यामुळे ब्राउझरमध्ये अडथळे (stuttering) येतात आणि फ्रेम्स ड्रॉप होतात.

उपाय: 32-बिट बफर मॅनिप्युलेशन तुम्ही पिक्सेल्सना चार वेगळे चॅनेल मानणे थांबवू शकता. त्याऐवजी, डेटा बफरवर Uint32Array ओव्हरले करा.

32-बिट व्ह्यू वापरून, तुम्ही R, G, B आणि A ला एका सिंगल इंटिजरमध्ये ग्रुप करू शकता. तुमचा लूप आता 33 दशलक्षऐवजी फक्त 8.2 दशलक्ष इटरेशन्स करतो. तुम्ही चारऐवजी प्रति पिक्सेल एकच ऑपरेशन प्रोसेस करता.

बिटवाईज XOR द्वारे जलद कलर इन्व्हर्जन Alpha ला स्पर्श न करता रंग उलट करण्यासाठी, बिटवाईज XOR ऑपरेटर (^) वापरा. मास्क 0x00FFFFFF वापरा.

हे कसे कार्य करते:

निकाल:

प्रो टिप: Web Workers वापरा जर तुम्ही अनेक हाय-रिझोल्यूशन फाइल्स प्रोसेस करत असाल, तर 32-बिट ऑपरेशन्समुळे देखील UI स्लो होऊ शकते. लॉजिक Web Worker मध्ये हलवा. बफर पास करण्यासाठी Transferable Objects वापरा. यामुळे डेटा कॉपी करणे टाळता येते आणि तुमचा मेन थ्रेड मोकळा राहतो.

जड (heavy) लूप्स वापरणे थांबवा. कार्यक्षम आणि वेगवान इमेज पाइपलाइन तयार करण्यासाठी 32-बिट वर्ड्स आणि बिटवाईज फ्लॅग्स वापरा.

स्रोत: https://dev.to/sharjeel360/high-performance-client-side-image-processing-optimizing-canvas-color-inversion-with-uint32array-1bgg