प्रगतिशील छवि लोडिंग का कार्यान्वयन

लेख फ्लैश का उपयोग किए बिना किसी साइट पर अपलोड करने वाली प्रगतिशील छवि के अपने स्वयं के कार्यान्वयन की संभावनाओं का वर्णन करता है। इंटरैक्टिव ड्राइंग एक तत्व के माध्यम से कार्यान्वित किया जाता है: एचटीएमएल 5 से कैनवास । प्रक्रिया का एल्गोरिदमिक आधार असतत तरंग परिवर्तन है।




मानक jpg प्रारूप में ब्राउज़र छवि को लोड करके, हम एक शीर्ष-डाउन रेंडरिंग देखते हैं, जैसे ही डेटा आता है। यह एक प्रगतिशील डाउनलोड का सबसे सरल उदाहरण है। मुझे पता नहीं है कि किस कारण से केंद्र से सर्पिलिंग के विकल्प को नजरअंदाज कर दिया गया, जो ज्यादातर तस्वीरें देखने के लिए प्रासंगिक है। प्रगतिशील लोडिंग के विचार को मानक प्रगतिशील jpg में विकसित किया गया था। इंटरनेट पर, यह काफी दुर्लभ है, हालांकि सभी प्रमुख ब्राउज़रों ने लंबे समय तक इस प्रारूप का समर्थन किया है। आरेखण एक स्पष्ट मोज़ेक संरचना के साथ फ्रेम द्वारा फ्रेम होता है - jpg मानक की विशेषताएं। हम jpeg2000 प्रारूप पर और ध्यान देने की कोशिश करेंगे। Jpg के विपरीत , कोसाइन ट्रांसफॉर्म के बजाय, jpeg2000 एक वेवलेट ट्रांसफॉर्म का उपयोग करता है, जो समान त्रुटि दर और कलाकृतियों के कम अवरुद्ध होने के साथ अधिक से अधिक संपीड़न अनुपात देता है। विकिपीडिया का दावा है कि यह जन्म से प्रगतिशील डाउनलोड का समर्थन करता है, लेकिन लेखक ने कभी इसे कार्रवाई में नहीं देखा है। इसके अलावा, jpeg2000 के सभी उदाहरण जो इंटरनेट पर पाए गए थे वे ब्राउज़र (क्रोम 18, एक्सप्लोरर 9, फ़ायरफ़ॉक्स 11) द्वारा नहीं खोले जा सकते थे। Fileinfo.com वेबसाइट में ऐसी जानकारी है कि विंडोज़ ब्राउज़र के अंतर्गत jp2 प्रारूप नहीं खुला है। यह देखते हुए कि प्रारूप, हालांकि अच्छा है, अभी भी वास्तव में समर्थित नहीं है, और यह छिपे हुए पेटेंट पर बोझ हो सकता है, हम तरंगिका परिवर्तन के आधार पर प्रगतिशील लोडिंग के हमारे संस्करण को लागू करने का प्रयास करेंगे।

हम एक ऐसी छवि लेते हैं जहां ऊंचाई और चौड़ाई 2 डिग्री के बराबर होती है (एल्गोरिथम की सीमा, हम इस पर विचार नहीं करेंगे कि इसे कैसे प्राप्त किया जाए)। हमारे मामले में, यह 1024 पिक्सेल की चौड़ाई और ऊंचाई के साथ एक काला और सफेद नक्शा है। हम एक बहु-स्तरीय दो आयामी तरंगिका परिवर्तन कार्यक्रम लिख रहे हैं। कोड संलग्न है: लिंक । Haar wavelet का उपयोग किया जाता है, हालाँकि कोड में आप किसी भी orthogonal wavelet फ़िल्टर और यहां तक ​​कि dyadic wavelets का चयन कर सकते हैं, जिसके बारे में लिखा जाएगा कि एक सफल एप्लिकेशन कब होगा। एल्गोरिथ्म के साथ या स्वयं तरंगिकाओं के साथ कौन निपटने की आवश्यकता है, मैं सिग्नल प्रोसेसिंग में एस मॉल वेवलेट्स द्वारा पुस्तक की सिफारिश करता हूं। हम कार्यक्रम शुरू करते हैं, हम छवि को निर्दिष्ट करते हैं। हमें एक ही स्तर (5 स्तरों के उदाहरण में) और विस्तार के प्रकारों के साथ तरंगित गुणांक (मात्रा को कम करने की आवश्यकता) के लिए txt फाइलें मिलती हैं। उन्हें सर्वर पर अपलोड करें। हम एक कैनवास ऑब्जेक्ट के साथ एक html पृष्ठ बनाते हैं और पृष्ठ लोड घटना में हम पहले से बनाए गए तरंगिका गुणांक फ़ाइलों को चरण दर चरण लोड करने के लिए एक स्क्रिप्ट लिखते हैं। हर बार फाइल अपलोड होने के बाद, इमेज रिकवरी फंक्शन (रिवर्स वेवलेट ट्रांसफॉर्म) कहा जाएगा। हम देखते हैं कि क्या हुआ: link_1 (2 एमबी) । मैं तुरंत मानता हूं कि चित्र मूल की तुलना में 10 गुना धीमा है। तथ्य यह है कि मात्रात्मक गुणांक को फ़ाइलों में पाठ के रूप में सहेजा गया था और परिमाण के एक स्थान को अधिक स्थान पर ले जाता है। हफ़मैन कोड या गुणांक के पूर्ण संपीड़न को लागू करना अभी भी आवश्यक था। एक्सप्लोरर स्क्रिप्ट के परिवर्तन को प्रदर्शित नहीं करना चाहता है जबकि स्क्रिप्ट चल रही है। क्रोम में, चीजें थोड़ी बेहतर होती हैं, यदि आप कहते हैं कि अलर्ट कहते हैं, तो चरण दिखाई देंगे ( लिंक_2 (2 एमबी) )। यदि कोड "नीरस" निष्पादित किया जाएगा तो व्यवहार एक्सप्लोरर के समान है। मैं फ़ायरफ़ॉक्स कोड के निष्पादन की भविष्यवाणी से प्रसन्न हूं, यही कारण है कि मैं आपको लिंक 1 देखने की सलाह देता हूं।

हम विश्वास के साथ कह सकते हैं कि HTML5 का उपयोग करके प्रगतिशील लोडिंग को लागू करना संभव है, कि आधुनिक ब्राउज़र श्रमसाध्य गणितीय गणनाओं (एक आधुनिक कंप्यूटर के साथ) को सहन करते हैं। यह प्रश्न कैनवास में होने वाले परिवर्तनों के समय पर दृश्य और सामान्य रूप से प्रगतिशील लोडिंग थीम की प्रासंगिकता के बारे में खुला रहता है। जैसा कि पहले उल्लेख किया गया है, यह अक्सर साइट पर प्रगतिशील jpg में नहीं देखा जाता है, और ब्राउज़रों के पास jp2 समर्थन बिल्कुल नहीं है।