🗂️ स्प्राइट शीट जेनरेटर

परिचय

यह उपकरण ब्राउज़र के कैन्वास API का उपयोग करता है जो आपकी छवियों को आपके उपकरण पर पूरी तरह से एक छोटे PNG स्प्राइट शीट में शेल्फ-पैक करता है - कोई भी सर्वर पर अपलोड नहीं होता है। आवश्यकता हो तो आप अपनी छवियों को ड्रॉप कर सकते हैं, अधिकतम पंक्ति चौड़ाई और प्रति-स्प्राइट पैडिंग को सेट कर सकते हैं, और पैकर उन्हें पंक्ति द्वारा पंक्ति रखता है ताकि अप्रयुक्त जगह कम हो सके। एक बार जनरेट करने के बाद, आप एक संयुक्त PNG को डाउनलोड कर सकते हैं और CSS फ्रेगमेंट को कॉपी कर सकते हैं, जिसमें प्रत्येक स्प्राइट के लिए एक क्लास होता है जिसमें सही बैकग्राउंड-इमेज, बैकग्राउंड-पॉज़िशन, चौड़ाई और ऊँचाई के मान होते हैं जो आपके स्टाइलशीट में पेस्ट करने के लिए तैयार होते हैं। क्योंकि सभी प्रक्रिया आपके ब्राउज़र में स्थानीय रूप से चलती है, इस प्रक्रिया तुरंत और पूरी तरह से निजी होती है।

कैसे उपयोग करें

1. अपनी छवियों को अपलोड क्षेत्र पर ड्रॉप करें या ब्राउज़ करें और एक साथ कई फ़ाइलें चुनें।
2. प्रति-स्प्राइट पैडिंग और अधिकतम पंक्ति चौड़ाई (पिक्सल में) को सेट करें ताकि वे कितनी घनी तरह से पैक किए जाएं इसका नियंत्रण कर सकें।
3. स्प्राइट शीट जनरेट करने पर क्लिक करें ताकि सभी छवियों को एक संयुक्त PNG में पैक किया जा सके, जो कैन्वास पर तुरंत पूर्वावलोकन के रूप में दिखाई देता है।
4. जनरेट किए गए CSS को कॉपी करें - प्रत्येक स्प्राइट के लिए एक क्लास होता है जिसमें सही बैकग्राउंड-पॉज़िशन, चौड़ाई और ऊँचाई के मान होते हैं।
5. PNG स्प्राइट शीट को डाउनलोड करें और CSS को अपने प्रोजेक्ट स्टाइलशीट में पेस्ट करें - तैयार।

सामान्य प्रश्न

मेरी छवियां किसी सर्वर पर अपलोड हो जाती हैं?

नहीं। सभी ब्राउज़र में कैन्वास API के उपयोग से चलता है। आपके फ़ाइलें कभी भी आपके उपकरण से बाहर नहीं जाती हैं।

मैं एक स्प्राइट शीट में कितनी छवियां जोड़ सकता हूं?

कोई कठोर सीमा नहीं है - उपकरण आपके ब्राउज़र की मेमोरी जितनी छवियों को पैक करता है। सर्वोत्तम प्रदर्शन के लिए, व्यक्तिगत स्प्राइट के आकार को तार्किक रखें।

अधिकतम पंक्ति चौड़ाई सेटिंग क्या करती है?

यह प्रत्येक पंक्ति के चौड़ाई को सीमित करता है जब तक पैकर एक नई पंक्ति शुरू नहीं करता है। एक बड़ा मान एक चौड़ा शीट बनाता है; एक छोटा मान एक ऊँचा और संकरा शीट बनाता है।

क्या मैं जनरेट किए गए CSS को अपने प्रोजेक्ट में सीधे उपयोग कर सकता हूं?

हां। प्रत्येक स्प्राइट क्लास में बैकग्राउंड-इमेज URL (आपके डाउनलोड किए गए PNG के इंगित करता है), बैकग्राउंड-पॉज़िशन, चौड़ाई और ऊँचाई के मान होते हैं - इसे किसी भी स्टाइलशीट में पेस्ट करें और अपने HTML तत्वों पर क्लास लागू करें।

मैं कौन से छवि फॉर्मेट को इनपुट स्प्राइट के रूप में उपयोग कर सकता हूं?

कोई भी फॉर्मेट जिसे आपका ब्राउज़र डिकोड कर सकता है - PNG, JPEG, WebP, GIF, SVG, AVIF आदि। आउटपुट स्प्राइट शीट हमेशा एक एकल PNG होता है जो अधिकतम संगतता के लिए होता है।

क्या यह टूल मेरा डेटा अपलोड करता है?

नहीं। सब कुछ आपके ब्राउज़र में ही चलता है, इसलिए आपका डेटा कभी आपके डिवाइस से बाहर नहीं जाता — पेज लोड होने के बाद यह ऑफ़लाइन भी काम करता है।