छवियाँ और तस्वीरें · छवि कन्वर्टर और कंप्रेसर
canvas.toBlob आपके ब्राउज़र के अंदर PNG को WebP में कैसे परिवर्तित करता है
· यह काम किस प्रकार करता है
छवि-प्रारूप कैनवास वेब
एक ब्राउज़र छवि कन्वर्टर एक डिकोडर, एक बिटमैप और एक एनकोडर एक साथ श्रृंखलाबद्ध होता है, और पूरी श्रृंखला ब्राउज़र में बनाई जाती है। यह पोस्ट एक PNG को डिकोड, कैनवास और टूब्लॉब के माध्यम से एक WebP फ़ाइल तक ले जाती है, और रास्ते में जो खो गया है उसे नोट करती है।
जब कोई सर्वर शामिल नहीं होता है तो WebP कहां से आता है - ऑफ़लाइन काम करने वाले कन्वर्टर के पीछे ठोस प्रश्न
WebP सर्वर-साइड रूपांतरण कतार से नहीं आता है। आपके ब्राउज़र में पहले से ही छवि डिकोडर, एक खींचने योग्य पिक्सेल सतह और एनकोडर हैं; ToolAcre कन्वर्टर उन्हें जोड़ता है। इसीलिए साइट लोड होने के बाद PNG को आपके टैब में बदला जा सकता है। "कोई अपलोड नहीं" स्रोत छवि और रूपांतरण आउटपुट को संदर्भित करता है, न कि उस वेबसाइट को जिसमें कोई नेटवर्क गतिविधि नहीं है।
चरण एक: डिकोडिंग - ब्राउज़र PNG बाइट्स को RGBA बिटमैप में कैसे बदलता है, और प्रत्येक प्रारूप एक ही ग्रिड के रूप में क्यों समाप्त होता है
सबसे पहले PNG को एक छवि बिटमैप में डिकोड किया जाता है। PNG संपीड़न, पैलेट विकल्प और रंग मेटाडेटा यह निर्धारित करते हैं कि इसके बाइट्स पिक्सेल कैसे बनते हैं, लेकिन कैनवास डिकोडेड रैस्टर पर काम करता है, PNG फ़ाइल के टुकड़ों पर नहीं। एक 1600×900 स्क्रीनशॉट 1.44 मिलियन पिक्सेल स्थिति उत्पन्न करता है, भले ही फ़ाइल स्वयं बहुत छोटी हो। ToolAcre createImageBitmap का उपयोग करता है और एक पिक्सेल बजट लागू करता है; एक बड़ी डिकोड की गई छवि अपलोड समस्या होने से पहले एक मेमोरी समस्या है।
चरण दो: स्टेजिंग क्षेत्र के रूप में कैनवास - मिलान आयामों के कैनवास या ऑफस्क्रीन कैनवास पर बिटमैप को चित्रित करना
अनुरोधित आउटपुट आयामों के साथ बिटमैप को कैनवास या ऑफस्क्रीनकैनवास में खींचा जाता है। यदि वे आयाम स्रोत से मेल खाते हैं और कोई फसल नहीं चुनी जाती है, तो ड्रॉइमेज एन्कोडिंग के लिए पिक्सेल को चरणबद्ध करता है; यदि आयाम बदलते हैं, तो कैनवास उनका पुन: नमूना बनाता है और WebP एन्कोडिंग शुरू होने से पहले पिक्सेल मान बदल सकते हैं। वही रेंडर रूटीन इंटरैक्टिव पूर्वावलोकन और वर्कर पथ पर कार्य करता है, जो उन दो आउटपुट को असंबंधित एल्गोरिदम का पालन करने से रोकता है।
चरण तीन: MIME प्रकार और गुणवत्ता के साथ toBlob - एनकोडर का चयन कैसे किया जाता है, गुणवत्ता संख्या क्या नियंत्रित करती है, और इसे PNG के लिए अनदेखा क्यों किया जाता है
एक सामान्य कैनवास पर, toBlob(कॉलबैक, "image/webp", गुणवत्ता) ब्राउज़र को WebP को एन्कोड करने के लिए कहता है और ब्लॉब के साथ वापस कॉल करता है। जहां ऑफस्क्रीनकैनवस उपलब्ध है, ToolAcre उसी कार्य के लिए ConvertToBlob({type,quality}) का उपयोग करता है। गुणवत्ता एक हानिपूर्ण एनकोडर को नियंत्रित करती है; यह किसी विशिष्ट बाइट गिनती का वादा नहीं है। PNG निर्यात हानिरहित है और इसका गुणवत्ता पैरामीटर JPEG जैसा संपीड़न स्तर निर्धारित नहीं करता है। हमेशा वास्तविक लौटाए गए प्रारूप का निरीक्षण करें, क्योंकि एनकोडर की उपलब्धता ब्राउज़र पर निर्भर करती है।
पाइपलाइन क्या छोड़ती है - मेटाडेटा, रंग प्रोफ़ाइल और 16-बिट परिशुद्धता, और यह बग के बजाय तकनीक का गुण क्यों है
डिकोड किए गए रैस्टर को दोबारा एन्कोड करने से मूल PNG कंटेनर में प्रत्येक तथ्य को संरक्षित नहीं किया जा सकता है। टेक्स्ट के टुकड़े, कैमरा या एडिटर मेटाडेटा, कुछ रंग प्रोफ़ाइल विवरण और स्रोत बिट गहराई कैनवास राउंड-ट्रिप में टिक नहीं सकते हैं; 16-बिट चैनल केवल इसलिए 16-बिट WebP नहीं बन जाते क्योंकि इनपुट उन्हें ले जाता है। जब एनकोडर इसका समर्थन करता है तो WebP पारदर्शिता बनाए रख सकता है, जबकि JPEG निर्यात के लिए पारदर्शी क्षेत्रों को भरने की आवश्यकता होती है। अकेले फ़ाइल आकार यह नहीं दिखा सकता कि रूपांतरण में महीन रेखाएँ या रंग संरक्षित हैं या नहीं।
कार्यान्वित उदाहरण: 1.8 MB PNG का स्क्रीनशॉट WebP - तीन चरणों के माध्यम से फ़ाइल का अनुसरण करना और परिणाम पढ़ना
टेक्स्ट, ग्रेडिएंट और एक पारदर्शी कोने के साथ 1.8 MB PNG स्क्रीनशॉट पर विचार करें। इसे डीकोड करें, आयामों को अपरिवर्तित छोड़ें, WebP चुनें, निर्यात करें और ब्लॉब आकार और MIME प्रकार की तुलना मूल से करें। परिणामी आकार को मापा जाता है, पूर्वानुमानित नहीं: साफ़ स्क्रीनशॉट अच्छी तरह से संपीड़ित हो सकते हैं, जबकि शोर वाली सामग्री नहीं हो सकती है। छोटी फ़ाइल स्वीकार करने से पहले छोटे ग्लिफ़ और पारदर्शी कोने पर ज़ूम करें। यदि स्पष्ट UI टेक्स्ट अस्पष्ट हो जाता है, तो PNG रखें या यह दावा करने के बजाय एनकोडर गुणवत्ता समायोजित करें कि WebP हमेशा बेहतर होता है।
इसमें क्या शामिल नहीं है - एनिमेटेड छवियां, प्रारूप जिन्हें ब्राउज़र डिकोड नहीं कर सकता है, और एनकोडर सेटिंग्स API को उजागर नहीं करती हैं
यह पाइपलाइन एनीमेशन प्रतिधारण, प्रत्येक डिवाइस पर HEIC डिकोडिंग या WebP एनकोडर के सबसैंपलिंग और प्रयास मापदंडों के पूर्ण नियंत्रण का वादा नहीं करती है। यह JPEG स्रोत को PNG या WebP के रूप में सहेजकर पहले से ही खोए गए विवरण को पुनर्प्राप्त नहीं कर सकता है। बार-बार डिकोड/re-encode चक्रों से हानि हो सकती है। एक मूल रखें, और वास्तविक टूल पेज पर सूचीबद्ध समर्थित इनपुट/output प्रारूपों का उपयोग करें, बजाय यह मानने के कि आपके ऑपरेटिंग सिस्टम द्वारा ज्ञात प्रत्येक प्रारूप को यहां स्वीकार किया गया है।
टेकअवे: तीन चरण, शून्य अपलोड - इमेज कन्वर्टर और कंप्रेसर आपके डिवाइस पर इस पाइपलाइन को कैसे चलाता है
तंत्र डिकोड → ड्रा → एनकोड है, जो ब्राउज़र APआई के साथ किया जाता है और कोई छवि अपलोड नहीं होती है। ToolAcre लक्ष्य प्रारूप और आयामों को उजागर करता है ताकि आप बता सकें कि क्या आप केवल कंटेनर बदल रहे हैं या पिक्सेल का आकार भी बदल रहे हैं। पूरे बैच को संसाधित करने से पहले इमेज कन्वर्टर और कंप्रेसर में एक प्रतिनिधि स्क्रीनशॉट का परीक्षण करें, फिर डाउनलोड किए गए परिणाम का उस आकार का निरीक्षण करें जिसे लोग देखेंगे।