छवियाँ एवं तस्वीरें · सामाजिक छवि पुनर्विक्रेता
ब्राउज़र छवि का आकार बदलना कैसे काम करता है: कैनवास, ड्रॉइमेज और रेज़ैम्पलिंग
· यह काम किस प्रकार करता है
छवि का आकार बदलने कैनवास ब्राउज़र-प्रसंस्करण
एक ब्राउज़र किसी फोटो को डीकोड कर सकता है, उसे एक नए आकार में कैनवास में खींच सकता है और परिणाम को एन्कोड कर सकता है, यह सब बिना सर्वर के। यह पोस्ट उस पाइपलाइन का अनुसरण करती है, बताती है कि गुणवत्ता कहां जीती है या खो गई है, और दिखाती है कि एकमात्र आकार सीमा आपके डिवाइस की मेमोरी क्यों है।
कोई अपलोड नहीं, कोई सर्वर नहीं, फिर भी आकार बदला गया - ठोस सवाल यह है कि जब कोई पेज 20-मेगापिक्सेल फोटो को सिकोड़ता है तो काम कहां होता है
एक छवि-प्रसंस्करण सर्वर पर जाए बिना एक तस्वीर 1350 पोर्ट्रेट द्वारा 1080 बन सकती है। सोशल इमेज रिसाइज़र ब्राउज़र पिकर से एक फ़ाइल प्राप्त करता है, इसके MIME प्रकार और आकार को मान्य करता है, और createImageBitmap को कॉल करता है। वह डिकोड किया गया बिटमैप प्रत्येक चयनित आउटपुट के लिए स्रोत बना रहता है, इसलिए एक स्थानीय ऑब्जेक्ट कई अलग-अलग आकार के कैनवस को फीड कर सकता है।
दृश्यमान पूर्वावलोकन नेटवर्क अनुरोध के पीछे छिपा अंतिम निर्यात नहीं है। यह समान फ़्रेमिंग स्थिति का एक छोटा कैनवास प्रतिपादन है: लक्ष्य अनुपात, ज़ूम, ऑफ़सेट, फ़िट मोड और पेजभूमि। निर्यात बाद में पूर्व निर्धारित आयामों पर रेंडर को दोहराता है, एक ब्लॉब को एन्कोड करता है और ब्लॉब को पेज में डाउनलोड नियंत्रणों को सौंप देता है।
डिकोडिंग स्थानीय है, लेकिन यह टूल 40 MB इनपुट सीमा भी लागू करता है
योजना कहती है कि डिवाइस मेमोरी ही एकमात्र व्यावहारिक सीमा है, लेकिन शिप किए गए इनपुट पथ में एक स्पष्ट 40 MB फ़ाइल सीमा भी है। JPEG, PNG और WebP स्वीकार किए जाते हैं; अन्य प्रकार डिकोडिंग से पहले खारिज कर दिए जाते हैं। उस गेट के बाद, createImageBitmap ब्राउज़र को संपीड़ित फ़ाइल बाइट्स को कैनवास द्वारा उपयोग करने योग्य चौड़ाई, ऊंचाई और डिकोड किए गए पिक्सेल में बदलने के लिए कहता है।
डिकोड किए गए पिक्सेल संपीड़ित फ़ाइल की तुलना में बहुत अधिक मेमोरी ले सकते हैं, और प्रत्येक आउटपुट कैनवास को अपने स्वयं के आवंटन की आवश्यकता होती है। इसलिए रेंडरर कैनवास बनाने से पहले साझा पिक्सेल-बजट गार्ड को कॉल करता है। यह दूसरी, डिवाइस-उन्मुख बाधा है, यह वादा करने की अनुमति नहीं है कि 40 MB से नीचे की प्रत्येक फ़ाइल प्रत्येक मशीन पर प्रत्येक अनुरोधित आउटपुट में फिट होगी।
ड्रॉइमेज एक पूर्ण बिटमैप को स्केल करता है जबकि आउटपुट कैनवास क्लिप ओवरफ्लो होता है
ToolAcre स्रोत फसल आयत की गणना नहीं करता है और आठ स्रोत-और-गंतव्य तर्कों को ड्रॉइमेज में पास नहीं करता है। यह स्रोत और लक्ष्य आयामों से एक पैमाने की गणना करता है, पूरे स्केल किए गए बिटमैप को स्थित करता है, और इसे एक कैनवास पर खींचता है जिसके किनारे किसी भी अतिप्रवाह को क्लिप करते हैं। कवर मोड में वह कतरन फसल है; सम्मिलित मोड में संपूर्ण बिटमैप दृश्यमान रहता है।
अंतर मायने रखता है क्योंकि काटना और आकार बदलना पर्यायवाची नहीं हैं। आकार बदलने से वे आयाम बदल जाते हैं जिन पर बिटमैप का नमूना लिया जाता है। क्रॉपिंग परिमित आउटपुट फ्रेम के बाहर जो कुछ भी है उसे हटा देती है। एक ड्रॉइमेज कॉल यहां दोनों प्रभावों में भाग ले सकती है, लेकिन क्रॉप का उत्पादन पहले स्रोत फ़ाइल को फिर से लिखने के बजाय फ्रेम ज्यामिति और क्लिपिंग द्वारा किया जाता है।
हुड के नीचे पुन: नमूनाकरण - सेटिंग्स को सुचारू करना, 'उच्च गुणवत्ता' संकेत ब्राउज़र को क्या करने के लिए कहता है, और ब्राउज़रों के बीच परिणाम थोड़े भिन्न क्यों होते हैं
ड्राइंग से पहले, रेंडरर imageSmoothingEnabled को सक्षम करता है और imageSmoothingQuality को उच्च पर सेट करता है। वे ब्राउज़र कैनवास नियंत्रण हैं, नामित लैंज़ोस, बाइकुबिक या अन्य कर्नेल के लिए अनुरोध नहीं। कार्यान्वयन सभी इंजनों में समान नमूनों का वादा नहीं कर सकता क्योंकि API ब्राउज़र की सटीक गुणांक तालिका के बजाय गुणवत्ता संकेत को उजागर करता है।
एक उपयोगी तुलना स्रोत, आउटपुट आयाम और ब्राउज़र को स्थिर रखती है, फिर विकर्ण किनारों, महीन रेखाओं और दोहराई गई बनावट का निरीक्षण करती है। यदि कोई अन्य ब्राउज़र थोड़ा भिन्न है, तो इसका मतलब यह नहीं है कि लक्ष्य अनुपात बदल गया है। इसका मतलब है कि एक ही ज्यामितीय अनुरोध एक अलग कैनवास कार्यान्वयन के माध्यम से पारित किया गया है, यही कारण है कि लेख आविष्कृत प्रदर्शन या गुणवत्ता प्रतिशत से बचता है।
आउटपुट को एन्कोड करना - कैनवास को वापस एन्कोडेड छवि फ़ाइल में बदलना और इसे डाउनलोड के लिए पेश करना
निर्यात कैनवास OffscreenCanvas.convertToBlob के माध्यम से एक ब्लॉब बन जाता है जब वह विधि मौजूद होती है, या HTMLCanvasElement.toBlob अन्यथा। उपयोगकर्ता JPEG, PNG या WebP चुनता है। एन्कोडर को एक गुणवत्ता मान प्रदान किया जाता है, हालाँकि PNG JPEG और WebP की तरह हानिपूर्ण-गुणवत्ता नियंत्रण का उपयोग नहीं करता है। परिणामी बाइट गिनती को मापा जाता है, अनुमान नहीं।
कई चयनित लक्ष्यों के लिए, टूल प्रत्येक ब्लॉब को क्रम में बनाता है, उसके वास्तविक आयाम और मापा आकार प्रदर्शित करता है, और पहले से एन्कोड की गई फ़ाइलों को ZIP में पैकेज कर सकता है। ZIP भंडारण यहां छवि संपीड़न में सुधार नहीं करता है; सामग्री नोट करती है कि वे प्रारूप पहले से ही संपीड़ित हैं। व्यक्तिगत डाउनलोड और संग्रह दोनों स्थानीय रूप से निर्मित बाइट्स से उत्पन्न होते हैं।
यह कार्यान्वयन मुख्य थ्रेड पर निर्यात कार्य करता है, वेब वर्कर में नहीं
कार्यपुस्तिका कहती है कि भारी काम आमतौर पर वेब वर्कर में चलता है, लेकिन यह ऐप क्रॉप और रेंडरिंग फ़ंक्शन को सीधे main.js में आयात करता है और वहां लक्ष्यों के माध्यम से लूप करता है। निरीक्षण पथ में कोई कार्यकर्ता नहीं बनाया गया है। पेज अभी भी सामान्य नौकरियों के लिए उपयोग योग्य बना रह सकता है, लेकिन किसी ऐसे आर्किटेक्चर को जिम्मेदार ठहराने के बजाय जवाबदेही देखी जानी चाहिए जो मौजूद नहीं है।
नेटवर्क अलगाव दो प्रकार के साक्ष्य द्वारा समर्थित है। कोर परीक्षण एक नेटवर्क गार्ड स्थापित करते हैं और प्रत्येक प्रीसेट को बिना किसी प्रयास के फ्रेम करते हैं, जबकि उत्पाद रिकॉर्ड स्थानीय प्रसंस्करण को चिह्नित करता है। रनटाइम नेटवर्क-पैनल जांच परिनियोजन साक्ष्य जोड़ सकती है। इसे यह दावा करने के बजाय कि पूरे पेज पर कोई अनुरोध नहीं है, छवि अपलोड को सामान्य पेज संपत्तियों या प्रकट विश्लेषण से अलग करना चाहिए।
इसमें क्या शामिल नहीं है - GPU-त्वरित आकार बदलने वाली लाइब्रेरी और सर्वर-साइड छवि पाइपलाइन
यह मार्ग जानबूझकर GPU लाइब्रेरी या रिमोट मीडिया पाइपलाइन के बजाय ब्राउज़र प्रिमिटिव पर बनाया गया है। यह चयन योग्य पुनः नमूनाकरण कर्नेल, बेंचमार्क वैकल्पिक एल्गोरिदम या त्वरित बैच प्रोसेसिंग का वादा नहीं करता है। एक स्रोत छवि कई फसलें पैदा करती है; कई असंबंधित स्रोत फ़ाइलें भिन्न वर्कफ़्लो से संबंधित हैं।
वे बहिष्करण वादे को परीक्षण योग्य बनाए रखते हैं। कोड फ़ाइल सत्यापन, बिटमैप डिकोडिंग, अंकगणितीय फ़्रेमिंग, कैनवास ड्राइंग, ब्लॉब एन्कोडिंग और डाउनलोड असेंबली साबित करता है। यह साबित नहीं करता है कि सर्वर फ़ार्म समान पिक्सेल का आकार कैसे बदलेगा या ब्राउज़र आंतरिक रूप से कौन सा GPU पथ चुन सकता है। दावे उपयोग किए गए अवलोकन योग्य वेब APआई पर रुकते हैं।
टेकअवे: आपके ब्राउज़र में पहले से ही एक रिसाइज़र अंतर्निहित है - सोशल इमेज रिसाइज़र इसे आपके लिए चलाता है, फ़ाइल को अपलोड किए बिना प्लेटफ़ॉर्म के पहलू अनुपात में क्रॉप और स्केल करता है।
ब्राउज़र पहले से ही आवश्यक संचालन प्रदान करता है, लेकिन उपयोगी परिणाम उनके आसपास सही ज्यामिति पर निर्भर करते हैं। सोशल इमेज रिसाइज़र कवर के लिए अधिकतम-स्केल, रोकथाम के लिए न्यूनतम-स्केल, क्लैंप मूवमेंट, सुरक्षित-क्षेत्र मार्गदर्शन का अलग से पूर्वावलोकन करता है और सटीक लक्ष्य आयामों पर निर्यात करता है। वह ऑर्केस्ट्रेशन निम्न-स्तरीय ड्राइंग API को दोहराए जाने योग्य सामाजिक-परिसंपत्ति वर्कफ़्लो में बदल देता है।
पहले से सिकुड़ी हुई प्रतिलिपि के बजाय मूल छवि के साथ पाइपलाइन का परीक्षण करें। मौजूदा टूल प्रीसेट या कस्टम अनुपात चुनें, विषय को स्थानांतरित करें, एक बार निर्यात करें और डाउनलोड किए गए आयामों का निरीक्षण करें। इसका प्रमाण आपको प्राप्त होने वाली स्थानीय फ़ाइल और उसे बनाने वाला कोड पथ है, यह दावा नहीं है कि प्रत्येक ब्राउज़र एक समान छिपे हुए रेज़ैम्पलर का उपयोग करता है।