HTML to Image कन्वर्टर

CSS के साथ HTML पेस्ट करें, साइज़ चुनें और PNG या JPG डाउनलोड करें। पेज आपके ब्राउज़र में रेंडर होता है, इसलिए प्राइवेट डिज़ाइन प्राइवेट ही रहते हैं।

नतीजा
आपकी इमेज यहां दिखेगी।

HTML को इमेज में कैसे बदलें

  1. अपना HTML और CSS एडिटर में पेस्ट करें। पूरा document या <style> ब्लॉक वाला सिर्फ़ एक टुकड़ा, दोनों चलते हैं।
  2. साइज़ चुनें। Open Graph (1200 x 630) वही साइज़ है जो Facebook, LinkedIn, X और Slack लिंक प्रीव्यू के लिए इस्तेमाल करते हैं। पूरा पेज 1280 पिक्सल चौड़ाई पर पूरी ऊंचाई कैप्चर करता है।
  3. टेक्स्ट और सपाट रंगों के लिए PNG चुनें, फ़ोटो के लिए JPG, फिर इमेज में बदलें और डाउनलोड करें दबाएं।

HTML ठीक उसी चौड़ाई पर लेआउट होता है जो आपने चुनी, इसलिए media queries वैसे ही काम करती हैं जैसे उस साइज़ की विंडो में करतीं। फ़िक्स्ड ऊंचाई होने पर किनारे के नीचे का हिस्सा कट जाता है।

उदाहरण

  • ब्लॉग के लिए सोशल कार्ड। ऊपर का उदाहरण सादे CSS में लिखा 1200 x 630 का कार्ड है। टाइटल बदलें, कन्वर्ट करें और PNG को पोस्ट की og:image के रूप में अपलोड करें।
  • ईमेल या रसीद की इमेज। किसी transactional ईमेल का HTML पेस्ट करें और पूरा पेज चुनें, ताकि डॉक्यूमेंटेशन या support ticket के लिए एक लंबी PNG मिल जाए।
  • स्लाइड के लिए Tailwind component। Tailwind CDN script जोड़ें, HD स्लाइड (1280 x 720) और स्केल 2x चुनें, और PNG को अपनी प्रेज़ेंटेशन में डाल दें।

HTML to image से जुड़े सवाल

क्या मेरा HTML किसी सर्वर पर भेजा जाता है?

नहीं। HTML इसी टैब के अंदर एक sandboxed frame में रेंडर होता है और वहीं open source html-to-image लाइब्रेरी से इमेज में बदला जाता है। कुछ भी अपलोड नहीं होता।

PNG में मेरा web font या इमेज क्यों नहीं दिख रही?

रेंडरर को हर font और इमेज डाउनलोड करके embed करनी पड़ती है। जो फ़ाइलें CORS headers के बिना सर्व होती हैं, उन्हें sandboxed पेज से पढ़ा नहीं जा सकता, इसलिए वे छूट जाती हैं। Google Fonts और CORS वाले इमेज होस्ट चलते हैं (हमने Google Fonts, Tailwind CDN और placehold.co इमेज टेस्ट कीं)। जो साइटें cross-origin पढ़ने को ब्लॉक करती हैं, उनकी इमेज नहीं चलतीं।

क्या Tailwind CSS इस्तेमाल कर सकते हैं?

हां। अपने HTML में <script src="https://cdn.tailwindcss.com"></script> जोड़ें। रेंडरर तस्वीर लेने से पहले पेज के स्थिर होने का इंतज़ार करता है, इसलिए Tailwind classes लागू हो जाती हैं।

स्केल 2x क्या करता है?

यह हर दिशा में दोगुने पिक्सल रेंडर करता है (1200 x 630 का कार्ड 2400 x 1260 बन जाता है), जिससे high density स्क्रीन पर टेक्स्ट शार्प रहता है। लेआउट नहीं बदलता।

क्या साइज़ की कोई लिमिट है?

स्केल के बाद हर साइड ज़्यादा से ज़्यादा 4096 पिक्सल हो सकती है, क्योंकि इससे बड़े canvas कई मोबाइल ब्राउज़र में फ़ेल हो जाते हैं।