मुफ़्त प्लेसहोल्डर छवि जेनरेटर

यह कैसे काम करता है

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

1. 1
   आयाम और रंग कॉन्फ़िगर करें

   एक चौड़ाई और ऊँचाई टाइप करें (हर एक 1–4000 px), या सामान्य सोशल मीडिया और डिज़ाइन साइज़ कवर करने वाले ग्यारह प्रीसेट में से एक चुनें। बिल्ट-इन थीम से एक बैकग्राउंड और टेक्स्ट रंग चुनें या सीधे कोई हेक्स वैल्यू दर्ज करें; एक नेटिव कलर पिकर और एक मान्य टेक्स्ट फ़ील्ड सिंक में रहते हैं।
2. 2
   Canvas API तुरंत प्रीव्यू रेंडर करता है

   एक React इफ़ेक्ट हर बदलाव पर drawPlaceholder() कॉल करता है। यह फ़ंक्शन CanvasRenderingContext2D का उपयोग करके आयत को बैकग्राउंड रंग से भरता है, वैकल्पिक रूप से 15% ओपेसिटी पर हल्की विकर्ण क्रॉस-हेयर लाइनें खींचता है, फिर आपका लेबल टेक्स्ट मापता है और सेंटर-अलाइन करता है — फ़ॉन्ट को अपने आप सिकोड़ता है जब तक यह कैनवस चौड़ाई के 90% में फ़िट न हो जाए।
3. 3
   PNG, JPEG, या SVG के रूप में एक्सपोर्ट करें

   PNG और JPEG डाउनलोड canvas.toDataURL() कॉल करते हैं, base64 परिणाम को मेमोरी में एक Blob में बदलते हैं, और डाउनलोड ट्रिगर करते हैं — सब कुछ सिंक्रोनसली यूज़र जेस्चर के भीतर ताकि iOS Safari के डाउनलोड नियम पूरे हों। SVG एक्सपोर्ट एक मिलती-जुलती rect, वैकल्पिक विकर्ण लाइनें, और एक टेक्स्ट एलिमेंट वाली एक स्व-निहित SVG स्ट्रिंग बनाता है, फिर इसे .svg फ़ाइल के रूप में सेव करता है।
4. 4
   बैच एक्सपोर्ट और कॉपी शॉर्टकट

   'सभी प्रीसेट डाउनलोड करें' बटन डायनामिक रूप से JSZip इम्पोर्ट करता है, उसी ड्रॉ फ़ंक्शन का उपयोग करके ग्यारह प्रीसेट साइज़ में से हर एक को एक off-screen कैनवस पर फिर से रेंडर करता है, और सभी PNGs को एक सिंगल ZIP में पैकेज करता है। कॉपी बटन एक PNG data URL, एक इनलाइन SVG img टैग, या कोड में तुरंत पेस्ट के लिए एक CSS background-image डिक्लेरेशन भेजते हैं।

संबंधित टूल