मुफ़्त टेक्स्ट से इमेज

आपको पाठ को छवि में क्यों बदलना चाहिए

पाठ और छवियाँ इंटरनेट से बहुत अलग तरीक़े से यात्रा करती हैं। पाठ को हर प्लेटफ़ॉर्म द्वारा पुन: स्वरूपित किया जाता है जो इसे छूता है, फ़ॉन्ट बदलते हैं, लाइन ब्रेक बदलते हैं, इंडेंटेशन ढह जाता है, विशेष वर्ण क्षत-विक्षत हो जाते हैं। छवियाँ परमाणु हैं: हर पिक्सेल बचता है। इसलिए जब भी स्वरूपण मायने रखता है, पाठ को छवि में बदलना यह सुनिश्चित करने का सबसे सरल तरीक़ा है कि आपने जो लिखा वही लोग देखें। सामान्य परिदृश्य: Twitter/X पर साझा किए गए कोड स्निपेट (जो टेक्स्ट पोस्ट से इंडेंटेशन और लाइन ब्रेक हटाता है लेकिन ख़ुशी से छवियों को रेंडर करता है); Instagram के लिए उद्धरण ग्राफिक्स (Instagram कैप्शन कोई फ़ॉन्ट स्वरूपण की अनुमति नहीं देते, हर सौंदर्य टाइपोग्राफ़िक पोस्ट पाठ की एक छवि है); फ़ोरम हस्ताक्षर और बैनर phpBB या Discourse पर जहाँ अपलोड की गई छवियाँ बचती हैं लेकिन BBCode में विदेशी टाइपोग्राफ़ी नहीं; UI-बिना-स्क्रीनशॉट जब आप पाठ का एक टुकड़ा साझा करना चाहते हैं जैसे आपने एक स्क्रीनशॉट लिया हो लेकिन आसपास के ब्राउज़र क्रोम के बिना; कस्टम बटन छवियाँ पुरानी शैली की वेबसाइटों या HTML ईमेल के लिए जहाँ वेबफ़ॉन्ट लाइसेंसिंग एक समस्या है; WhatsApp Status और Snapchat ओवरले जहाँ स्टाइल वाले छवि पाठ प्लेटफ़ॉर्म के अपने कैप्शन टूल से बेहतर पढ़ते हैं; ईमेल हस्ताक्षर उन क्लाइंट के लिए जो समृद्ध स्वरूपण हटा देते हैं (पुराने Outlook संस्करण कुख्यात हैं, छवि-आधारित हस्ताक्षर समाधान है)। आम सूत्र: जब आप गंतव्य पर भरोसा नहीं कर सकते कि वह पाठ को आपकी इच्छित तरीक़े से रेंडर करेगा, तो पहले इसे ख़ुद छवि के रूप में रेंडर करें।

Canvas API पाठ कैसे रेंडर करता है

HTML <canvas> तत्व एक 2D रेंडरिंग संदर्भ को उजागर करता है जो तीन मुख्य विधियों के माध्यम से पाठ को संभालता है। ctx.font CSS के समान आशुलिपि स्वीकार करता है ("bold 32px Helvetica, Arial, sans-serif"), फ़ॉन्ट वज़न, फ़ॉन्ट आकार और फ़ॉन्ट परिवार एक स्ट्रिंग में। ctx.fillStyle रंग सेट करता है (कोई भी CSS रंग मान: hex, rgb, hsl, नामित)। ctx.fillText(text, x, y) वर्तमान फ़ॉन्ट और भरण का उपयोग करके दी गई स्थिति पर पाठ को रेंडर करता है। दो समर्थन विधियाँ मायने रखती हैं: ctx.measureText(text) एक TextMetrics ऑब्जेक्ट लौटाता है जिसमें रेंडर की गई width और (आधुनिक ब्राउज़रों में) ऊर्ध्वाधर बाउंडिंग-बॉक्स गणना के लिए actualBoundingBoxAscent और actualBoundingBoxDescent शामिल हैं; ctx.textAlign x-निर्देशांक के सापेक्ष क्षैतिज संरेखण (left, right, center, start, end) को नियंत्रित करता है; ctx.textBaseline y-निर्देशांक के सापेक्ष ऊर्ध्वाधर संरेखण (top, middle, alphabetic, hanging, ideographic) को नियंत्रित करता है। डिफ़ॉल्ट alphabetic बेसलाइन y-निर्देशांक को लोअरकेस अक्षरों की बेसलाइन पर रखता है, जो टाइपोग्राफ़िक परंपरा है लेकिन लेआउट के लिए प्रति-सहज है, अधिकांश रेंडरिंग कोड पूर्वानुमेय y-स्थिति के लिए top पर स्विच करते हैं। मल्टी-लाइन पाठ ऑटो-रैप नहीं होता: fillText एक ही स्थान पर एक पंक्ति रेंडर करता है। एक लूप में measureText का उपयोग करके शब्द-दर-शब्द मैन्युअल रैपिंग मानक पैटर्न है।

केवल सात फ़ॉन्ट क्यों

यहाँ सात फ़ॉन्ट विकल्प, Arial, Helvetica, Georgia, Times New Roman, Courier New, Verdana, Impact, अनिवार्य रूप से हर Windows, macOS और अधिकांश Linux डेस्कटॉप स्थापनाओं पर डिफ़ॉल्ट रूप से शिप होने वाले विहित "वेब-सुरक्षित फ़ॉन्ट" हैं। सूची Microsoft की Core Fonts for the Web परियोजना (1996-2002) से उभरी, जिसने Impact, Verdana, Georgia, Trebuchet MS और अन्य को क्रॉस-प्लेटफ़ॉर्म स्थिरता को बीज देने के लिए मुफ़्त TrueType डाउनलोड के रूप में वितरित किया। केवल सिस्टम फ़ॉन्ट चुनने का मतलब है कि रेंडर की गई छवि उसी डिवाइस की परवाह किए बिना समान दिखती है जो इसे उत्पन्न करता है; Google Font का उपयोग करने के लिए पहले किसी भी Canvas पाठ रेंडरिंग से पहले document.fonts.ready Promise के माध्यम से फ़ॉन्ट फ़ाइल लोड करने की आवश्यकता होगी, एक व्यावहारिक लेकिन भारी पथ। उन उपकरणों के लिए जिनका विशिष्ट कार्य "फ़ैंसी टाइपोग्राफ़ी" है, कस्टम फ़ॉन्ट लोड करना आवश्यक है। एक त्वरित-उपयोगिता पाठ-से-छवि जनरेटर के लिए, सात वेब-सुरक्षित विकल्प अनिवार्य रूप से हर सामान्य टाइपोग्राफ़िक रजिस्टर को कवर करते हैं: Arial / Helvetica (तटस्थ सैंस-सेरिफ़, वर्कहॉर्स), Verdana (स्क्रीन रीडिंग के लिए डिज़ाइन किया गया बड़ा x-ऊँचाई सैंस-सेरिफ़), Georgia / Times New Roman (लालित्य / औपचारिकता के लिए सेरिफ़), Courier New (कोड-जैसी सामग्री के लिए मोनोस्पेस), Impact (मीम-विहित संघनित बोल्ड डिस्प्ले फ़ेस)। जानबूझकर विचित्र या ब्रांडेड टाइपोग्राफ़ी के लिए, एक समर्पित उपकरण का उपयोग करें जो कस्टम फ़ॉन्ट लोड करता है।

उच्च-DPI / Retina तीक्ष्णता

एक भोला Canvas कार्यान्वयन उच्च-घनत्व डिस्प्ले पर धुंधला आउटपुट उत्पन्न करता है। आधुनिक फोन, टैबलेट और "Retina" लैपटॉप का window.devicePixelRatio 2 (कभी-कभी 3) होता है, जिसका अर्थ है कि प्रत्येक CSS पिक्सेल 2 (या 3) भौतिक पिक्सेल पर मैप करता है। अपने CSS आयामों पर रेंडर किए गए Canvas में प्रति CSS पिक्सेल केवल 1 पिक्सेल विवरण होता है, जो प्रदर्शन के लिए 2x तक खिंच जाता है, दिखाई देने वाली कोमलता उत्पन्न करता है। समाधान Canvas के बैकिंग-स्टोर आयामों (canvas.width और canvas.height) को devicePixelRatio से गुणा किए गए CSS आयामों पर सेट करना है, फिर मूल CSS आयामों के लिए प्रदर्शित आकार को लॉक करने के लिए CSS का उपयोग करना है, फिर ctx.scale(devicePixelRatio, devicePixelRatio) को कॉल करना है ताकि सभी बाद के ड्राइंग ऑपरेशन मूल CSS निर्देशांक प्रणाली का उपयोग करें। यह उपकरण स्वचालित रूप से उच्च-DPI सुधार लागू करता है, डाउनलोड किया गया PNG रेटिना रिज़ॉल्यूशन पर तीक्ष्ण है और विशिष्ट दस्तावेज़ आकारों पर साफ़ प्रिंट करता है।

छवियों के रूप में कोड स्निपेट, इसके बजाय Carbon का उपयोग करें

छवियों के रूप में कोड स्निपेट साझा करने के लिए, "पाठ-से-छवि" के लिए सबसे आम उपयोग के मामले के लिए, समर्पित उपकरण हैं जो सिंटैक्स हाइलाइटिंग, भाषा का पता लगाना, थीम प्रीसेट और विंडो-क्रोम सजावट को एक सामान्य पाठ-से-छवि जनरेटर की तुलना में बहुत बेहतर तरीक़े से संभालते हैं। Carbon (Dawn Labs, 2017 में लॉन्च, carbon.now.sh) विहित विकल्प है: कोड पेस्ट करें, एक भाषा और एक थीम चुनें, Twitter/Slack/ब्लॉग पोस्ट के लिए रेंडर किए गए आउटपुट को छोड़ें। Ray.so (Raycast, 2022 में लॉन्च) आधुनिक Carbon प्रतियोगी है जिसमें थोड़ा साफ़ डिफ़ॉल्ट सौंदर्य और बेहतर डार्क-थीम प्रबंधन है। Codeimg.io, Chalk.ist, Snappify और CodeSnap विभिन्न विभेदकों (टेम्पलेट, मल्टी-विंडो लेआउट, ब्रांडेड पृष्ठभूमि) के साथ एक ही जगह में प्रतिस्पर्धा करते हैं। सादे गद्य, मुखपृष्ठों, उद्धरणों और हस्ताक्षरों के लिए, यह जनरेटर सही आकार है; कोड के लिए, Carbon का उपयोग करें।

पाठ छवियों के लिए PNG बनाम JPEG बनाम WebP

ज्यादातर पाठ वाली छवियों के लिए (जो यह उपकरण उत्पन्न करता है), PNG लगभग हमेशा सही प्रारूप है। पाठ में कठोर किनारे और बड़े सपाट रंग क्षेत्र होते हैं, बिल्कुल वही जो JPEG सबसे बुरी तरह संभालता है। JPEG का असतत कोसाइन परिवर्तन तीक्ष्ण किनारों को रिंगिंग कलाकृतियों ("मच्छर शोर") से धुंधला कर देता है जो विशेष रूप से अक्षर रूपों के आसपास बुरे दिखते हैं। PNG का हानिरहित DEFLATE संपीड़न सपाट रंग क्षेत्रों को कुशलता से संभालता है और किसी भी ज़ूम स्तर पर पाठ को कुरकुरा रखता है। PNG पारदर्शिता का भी समर्थन करता है, बाद में मौजूदा छवियों पर पाठ को ओवरले करते समय उपयोगी। JPEG केवल फोटोग्राफ़िक पृष्ठभूमि वाली पाठ छवियों के लिए समझ में आता है (उदाहरण के लिए, एक परिदृश्य फोटो के ऊपर एक उद्धरण) जहाँ फोटोग्राफ़िक सामग्री फ़ाइल आकार पर हावी है। WebP (हानिरहित मोड) आमतौर पर 26% छोटे फ़ाइल आकार में PNG-समकक्ष गुणवत्ता देता है और 2026 तक 97% ब्राउज़रों में समर्थित है। यह उपकरण अधिकतम संगतता के लिए PNG निर्यात करता है, प्रारूप समर्थन की चिंता किए बिना किसी भी एप्लिकेशन में छोड़ दें।

पहुँच नोट: पाठ-के-रूप-में-छवि खोज क्षमता खो देती है

जब भी आप पाठ को छवि में बदलते हैं, तो आप तीन चीज़ें खो देते हैं: स्क्रीन-रीडर पहुँच (सहायक तकनीक का उपयोग करने वाले दृष्टि-बाधित उपयोगकर्ता OCR के बिना छवि के अंदर पाठ नहीं पढ़ सकते हैं), खोज क्षमता (खोज इंजन और पाठ-खोज उपकरण आसपास के कैप्शन या वैकल्पिक पाठ को अनुक्रमित करते हैं लेकिन छवि सामग्री को नहीं), और कॉपी-पेस्ट (उपयोगकर्ता PNG से पाठ चुन और कॉपी नहीं कर सकते)। उन सोशल पोस्ट के लिए जहाँ छवि-के-रूप-में-पाठ ट्रेड-ऑफ़ जानबूझकर है, यह ठीक है। किसी भी चीज़ के लिए जिसे खोजने योग्य, अनुक्रमणीय या सुलभ होना चाहिए, CSS के साथ शैलीबद्ध वास्तविक HTML पाठ को प्राथमिकता दें और छवि-के-पाठ दृष्टिकोण को उन संदर्भों के लिए आरक्षित करें जहाँ प्लेटफ़ॉर्म आपका हाथ बाध्य करता है। WCAG दिशानिर्देश किसी भी पाठ-के-रूप-में-छवि के लिए सार्थक वैकल्पिक पाठ प्रदान करने की सिफ़ारिश करते हैं, कम से कम, दृश्यमान पाठ को alt विशेषता में लिप्यंतरित करना ताकि स्क्रीन रीडर इसे घोषित कर सकें।

गोपनीयता: क्यों केवल-ब्राउज़र यहाँ मायने रखता है

जिस पाठ को आप छवि में बदलते हैं वह बिल्कुल वही प्रकार की सामग्री है जहाँ गोपनीयता मायने रखती है: सोशल पोस्ट के मसौदे, आंतरिक मेमो, गोपनीय दस्तावेज़ों से पाठ-के-स्क्रीनशॉट, अप्रकाशित कार्य से उद्धरण। सर्वर-साइड पाठ-से-छवि जनरेटर आपके पाठ को एक दूरस्थ सर्वर पर अपलोड करते हैं, जहाँ यह लॉग में बैठता है। यह उपकरण Canvas API के माध्यम से पूरी तरह से आपके ब्राउज़र में चलता है, जनरेट करते समय DevTools के Network टैब में सत्यापित करें, या लोड होने के बाद पेज को ऑफ़लाइन (हवाई जहाज मोड) ले जाएँ और उपकरण अभी भी काम करता है। गोपनीय मसौदों, NDA क्लाइंट कॉपी, आंतरिक संचार या किसी भी पाठ के लिए सुरक्षित जिसे आप किसी अजनबी की हार्ड ड्राइव पर कॉपी नहीं करना चाहेंगे।

अक्सर पूछे जाने वाले प्रश्न