म कसरी ठ्याक्कै साइजको प्लेसहोल्डर इमेज बनाउने?

चौडाइ (px) र उचाइ (px) टाइप गर्नुहोस्, रङहरू वा रङ थिम छान्नुहोस्, त्यसपछि PNG डाउनलोड गर्नुहोस्, JPG डाउनलोड गर्नुहोस् वा SVG डाउनलोड गर्नुहोस् क्लिक गर्नुहोस्। पूर्वनिर्धारित रूपमा इमेजले यसको आयामहरू, जस्तै 800 x 600, लेबलको रूपमा देखाउँछ।

मैले उत्पन्न गर्न सक्ने सबैभन्दा ठूलो प्लेसहोल्डर इमेज कुन हो?

चौडाइ र उचाइ प्रत्येक 1 र 4000 पिक्सेलको बीचमा हुनुपर्छ। त्यो दायरा बाहिरका मानहरूले चौडाइ र उचाइ 1 र 4000 px को बीच हुनु पर्छ त्रुटि देखाउँछ।

म कसरी फाइल बिना सिधै HTML मा प्लेसहोल्डर इमेज राख्ने?

Data URL को रूपमा प्रतिलिपि गर्नुहोस् क्लिक गर्नुहोस् र यसलाई img ट्यागमा src मानको रूपमा टाँस्नुहोस्। तपाईं HTML स्निपेट प्रतिलिपि गर्नुहोस् वा CSS पृष्ठभूमि प्रतिलिपि गर्नुहोस् पनि प्रयोग गर्न सक्नुहुन्छ। कुनै बाह्य इमेज होस्ट आवश्यक पर्दैन।

के म मानक सामाजिक सञ्जाल वा वेब साइजहरू उत्पन्न गर्न सक्छु?

हो। पूर्वनिर्धारित आकारहरूमा Instagram पोस्ट, Instagram कहानी, Twitter कार्ड, खुला ग्राफ, YouTube थम्बनेल, Facebook कभर र ईमेल शीर्षलेख समावेश छन्। सबै पूर्वनिर्धारितहरू डाउनलोड गर्नुहोस् (ZIP) ले सबै एघारलाई PNG फाइलहरूको रूपमा बचत गर्छ।

म कसरी प्लेसहोल्डरमा आफ्नै पाठ वा विकर्ण रेखाहरू राख्ने?

आयामहरू देखाउनुको सट्टा अनुकूलित पाठमा एउटा लेबल टाइप गर्नुहोस्, उदाहरणका लागि हिरो इमेज। धमिलो विकर्णहरू कोर्न विकर्ण रेखाहरू देखाउनुहोस् (X) मा टिक गर्नुहोस्। लामो पाठ चौडाइमा फिट हुन स्वचालित रूपमा संकुचित हुन्छ।

के यो साँच्चै निःशुल्क हो?

हो। प्रत्येक उपकरण नि:शुल्क प्रयोग गर्न सकिन्छ, कुनै खाता र क्रेडिट कार्ड बिना। काम हाम्रो सर्भरको सट्टा तपाईंको उपकरणमा चल्छ, जसले गर्दा यो चलाउन नि:शुल्क रहन्छ।

के यो मोबाइलमा काम गर्छ?

हो। यो iOS र Android का हालका मोबाइल ब्राउजरमा चल्छ, केही इन्स्टल गर्नु पर्दैन।

🖼️

निःशुल्क प्लेसहोल्डर इमेज जेनेरेटर

कस्टम आयाम, पाठ, र रङहरूसहित रङिन placeholder छविहरू उत्पन्न गर्नुहोस्। सामाजिक मिडिया, mockup, र डिजाइन comp का लागि मानक साइजहरू।

तपाईंको ब्राउजरमा चल्छसाइन-अप छैन, पप-अप छैनलगइन आवश्यक छैनसधैँका लागि नि:शुल्क

चौडाइ (px)

उचाइ (px)

पूर्वनिर्धारित आकारहरू

रङ थिमहरू

पृष्ठभूमि

पाठ / रेखाहरू

अनुकूलित पाठ (आयामका लागि खाली राख्नुहोस्)

अनुकूलित पाठ नभए आयाम देखाउनुहोस्विकर्ण रेखाहरू देखाउनुहोस् (X)

💡 HTML मकअपहरूका लागि: «Data URL को रूपमा प्रतिलिपि गर्नुहोस्» विकल्प प्रयोग गर्नुहोस् र इनलाइन प्लेसहोल्डरका लागि <img src="..."> मा टाँस्नुहोस्। Figma / Sketch डिजाइनका लागि PNG डाउनलोड गरेर तान्नुहोस्।

सामान्य प्रयोगहरू

डिजाइन मकअपको लागी प्लेसहोल्डर छविहरुFigma, Sketch वा वेब डिजाइन मकअपमा प्रयोगको लागी आकारित रङिन बक्सहरु उत्पन्न गर्नुहोस् वास्तविक छविहरु तयार हुनुभन्दा पहिले।
HTML प्रोटोटाइपको लागी इनलाइन प्लेसहोल्डरहरु\"डेटा URL को रूपमा प्रतिलिपि गर्नुहोस्\" प्रयोग गरी प्लेसहोल्डर छविहरु सीधै HTML मा इनलाइन गर्नुहोस् द्रुत प्रोटोटाइपको लागी।
CMS कन्टेन्ट स्लटको लागी प्लेसहोल्डरहरुCMS टेम्प्लेट डेमो गर्दा, संवेदनशील पूर्वावलोकनको लागी वास्तविक कन्टेन्टको सट्टामा प्लेसहोल्डर छविहरु प्रयोग गर्नुहोस्।
सामाजिक मिडिया छवि टेम्प्लेटहरुInstagram, Facebook, Twitter, LinkedIn पोस्ट टेम्प्लेटको लागी सही साइजको प्लेसहोल्डर उत्पन्न गर्नुहोस्।
CSS लेआउट परीक्षण छविहरुप्रतिक्रिया CSS लेआउट तनाव-परीक्षण गर्न चरम आकार अनुपात मा छविहरु उत्पन्न गर्नुहोस्।

यो कसरी काम गर्छ

सबै कुरा तपाईंको ब्राउजरमा HTML Canvas API र हातले लेखिएको SVG मार्कअप प्रयोग गरी हुन्छ — कुनै सर्भर छैन, कुनै अपलोड छैन, कुनै तेस्रो-पक्ष सेवा छैन। तपाईं आयाम, रङ, र लेबल पाठ सेट गर्नुहुन्छ, र उपकरणले वास्तविक समयमा सीधै एउटा क्यानभास एलिमेन्टमा छवि पेन्ट गर्छ, त्यसपछि यसलाई अनुरोधमा PNG, JPEG, वा SVG मा सिरियलाइज गर्छ।

1
आयाम र रङहरू कन्फिगर गर्नुहोस्
चौडाइ र उचाइ टाइप गर्नुहोस् (हरेक 1–4000 px), वा सामान्य सामाजिक मिडिया र डिजाइन साइजहरू समेट्ने एघार प्रिसेटमध्ये एउटा छान्नुहोस्। बिल्ट-इन थिमहरूबाट पृष्ठभूमि र पाठ रङ छान्नुहोस् वा कुनै पनि hex मान सीधै प्रविष्ट गर्नुहोस्; एउटा नेटिभ रङ छनोटकर्ता र एउटा प्रमाणित पाठ फिल्ड सिंकमा रहन्छन्।
2
Canvas API ले पूर्वावलोकन तुरुन्तै रेन्डर गर्छ
एउटा React इफेक्टले हरेक परिवर्तनमा drawPlaceholder() कल गर्छ। यो फङ्सनले CanvasRenderingContext2D प्रयोग गरी आयतलाई पृष्ठभूमि रङले भर्छ, वैकल्पिक रूपमा 15% अपासिटीमा हल्का विकर्ण क्रस-हेयर रेखाहरू कोर्छ, त्यसपछि तपाईंको लेबल पाठ मापन र केन्द्र-मिलाउँछ — क्यानभास चौडाइको 90% भित्र फिट नभएसम्म फन्ट स्वतः खुम्च्याउँदै।
3
PNG, JPEG, वा SVG को रूपमा निर्यात गर्नुहोस्
PNG र JPEG डाउनलोडले canvas.toDataURL() कल गर्छ, base64 नतिजालाई मेमोरीमा एउटा Blob मा बदल्छ, र डाउनलोड ट्रिगर गर्छ — सबै सिंक्रोनस रूपमा प्रयोगकर्ता इसाराभित्रै ताकि iOS Safari को डाउनलोड नियमहरू पूरा होऊन्। SVG निर्यातले एउटा मिल्दो rect, वैकल्पिक विकर्ण रेखाहरू, र एउटा text एलिमेन्टसहित एउटा स्वयं-निहित SVG स्ट्रिङ बनाउँछ, त्यसपछि यसलाई .svg फाइलको रूपमा सुरक्षित गर्छ।
4
ब्याच निर्यात र प्रतिलिपि सर्टकटहरू
'Download all presets' बटनले गतिशील रूपमा JSZip आयात गर्छ, उही ड्रअ फङ्सन प्रयोग गरी एघारवटा प्रिसेट साइजमध्ये हरेकलाई एउटा अफ-स्क्रिन क्यानभासमा फेरि रेन्डर गर्छ, र सबै PNG हरूलाई एउटा एकल ZIP मा प्याकेज गर्छ। प्रतिलिपि बटनहरूले कोडमा तुरुन्तै पेस्टका लागि एउटा PNG डेटा URL, एउटा इनलाइन SVG img ट्याग, वा एउटा CSS background-image घोषणा उत्सर्जन गर्छन्।