सीधे कंटेंट पर जाएँ
Toolars
एक्सप्लोर करें
बग रिपोर्ट करें

डेवलपर · लोकल उपयोगिता

कोड से इमेज

Code to Image Converter

कोड पेस्ट करें, भाषा और थीम चुनें, फ़्रेम सजाएँ और हाइलाइट किया कोड PNG या SVG में एक्सपोर्ट करें — स्केल और फ़ॉन्ट एडजस्टेबल, पूरी तरह लोकल।

टास्क पथ / इनपुट से परिणाम तक

अपना कोड पेस्ट करें

लोकल रूप से चलता है · कुछ भी अपलोड नहीं होता

कोड से इमेज कैसे काम करता है, निजता और संबंधित टूल

टास्क पथ / इनपुट से परिणाम तक

कोड को साझा करने योग्य इमेज में कैसे बदलें

  1. 01

    अपना कोड पेस्ट करें

    कोड स्रोत फ़ील्ड में टाइप या पेस्ट करें — 65,536 UTF-8 बाइट तक, ज़्यादा से ज़्यादा 200 लाइन और प्रति लाइन 240 अक्षर। लेबल के बगल का काउंटर सीमा के मुकाबले मौजूदा बाइट गिनती दिखाता है, और किसी सीमा से आगे की चीज़ उसका नाम लेने वाले संदेश के साथ अस्वीकार होती है, ताकि आप जानें कि ठीक क्या काटना है।

  2. 02

    भाषा और थीम चुनें

    भाषा के नीचे JavaScript, TypeScript, HTML, CSS, JSON या Bash चुनें, फिर थीम को लाइट या डार्क पर सेट करें। सिंटैक्स रंग मेल खाते Shiki ग्रामर और GitHub-शैली की थीम से आते हैं, और नमूना लोड करें फ़ील्ड को चुनी भाषा के छोटे उदाहरण से भर देता है ताकि अपना पेस्ट करने से पहले लुक की तुलना कर सकें।

  3. 03

    फ्रेम स्टाइल करें

    बैकग्राउंड रंग, 16 से 96 px की पैडिंग और 12 से 28 px का फ़ॉन्ट साइज़ सेट करें, फिर 80 अक्षरों तक का विंडो शीर्षक जोड़ें, लाइन नंबर दिखाएं टॉगल करें, और 1x या 2x का एक्सपोर्ट स्केल चुनें। लाइन ऊंचाई फ़ॉन्ट साइज़ का अपने आप पालन करती है, इसलिए बड़ा टाइप बिना अतिरिक्त ट्यूनिंग के पठनीय रहता है।

  4. 04

    पूर्वावलोकन बनाएं

    बनाएं लोकल टोकनाइज़र लोड करता है, असली फ़ॉन्ट रन और विंडो शीर्षक मापता है, और एक्सपोर्ट के लिए इस्तेमाल होने वाला वही एस्केप्ड SVG प्रदर्शित करता है। कोड निष्क्रिय टेक्स्ट रहता है। संपादन पुराना पूर्वावलोकन मिटा देते हैं। ज़्यादा बड़ा या न मापा जा सकने वाला आउटपुट अस्वीकार होता है; चौड़े पूर्वावलोकन कीबोर्ड से स्क्रॉल किए जा सकते हैं।

  5. 05

    SVG या PNG डाउनलोड करें

    स्केल करने योग्य वेक्टर फ़ाइल के लिए SVG डाउनलोड करें इस्तेमाल करें, या चुने स्केल पर Canvas के ज़रिए रेंडर की गई बिटमैप के लिए PNG डाउनलोड करें। दोनों फ़ाइलें लोकल रूप से बनती हैं, और अगर चुना गया कॉम्बिनेशन सुरक्षित एक्सपोर्ट साइज़ से आगे जाए तो वर्कस्पेस खराब फ़ाइल लिखने के बजाय साफ़ बता देता है।

टूल के तथ्य

प्रोसेसिंग
आपके ब्राउज़र में
इनपुट इस डिवाइस से बाहर जाता है
कभी नहीं
रिटेंशन
कुछ भी स्टोर नहीं होता
कीमत
मुफ़्त

आपका इनपुट ब्राउज़र में ही रहता है।

कोड से इमेज अपना सत्यापित लोकल एक्ज़ीक्यूशन पथ इस्तेमाल करता है और कोई छिपा इनपुट या आउटपुट इतिहास नहीं बनाता।

लोकल एक्ज़ीक्यूशन

मौजूदा ब्राउज़र टैब के अंदर चलता है।

कोई छिपी प्रोसेसिंग नहीं

सक्रिय टूल डेटा कभी Toolars दस्तावेज़ रिकॉर्ड नहीं बनता।

खाते की ज़रूरत नहीं

बिना प्रोफ़ाइल बनाए मुख्य वर्कफ़्लो इस्तेमाल करें। साइन इन करने के बाद फ़ेवरिट आपके खाते से सिंक होते हैं।

तुरंत रीसेट

टैब साफ़ करें और सक्रिय कार्य डेटा गायब।

कोड से इमेज कब उपयोगी होता है

दो पंक्तियों का कोड निर्यात करें

दो पंक्तियाँ डालें: const total = 2 + 3; और console.log(total); (40 UTF-8 बाइट)। JavaScript, डार्क, पृष्ठभूमि #111827, पैडिंग 64 px, फ़ॉन्ट 16 px, लाइन नंबर चालू, शीर्षक sum.js और 1× चुनें। 2026-09-24 के स्थानीय ब्राउज़र परीक्षण में पूर्वावलोकन बनाकर PNG डाउनलोड करने पर toolars-code-image.png 406 × 270 पिक्सेल और 12,784 बाइट का मिला। चित्र कोड दिखाता है, उसे चलाता नहीं।

1×, 2× और SVG की तुलना करें

कोड और सेटिंग वही रखें, 2× पर जाएँ, फिर पूर्वावलोकन बनाकर PNG डाउनलोड करें। 2026-09-24 की फ़ाइल 812 × 540 पिक्सेल और 31,366 बाइट थी। 1× पर SVG डाउनलोड से toolars-code-image.svg (1,647 बाइट) मिला, जिसका viewBox 406 × 270 था। स्केल PNG पिक्सेल बदलता है, कोड नहीं; फ़ॉन्ट और ब्राउज़र से आकार व बाइट बदल सकते हैं। बिना एम्बेड फ़ॉन्ट के SVG अलग दिख सकता है।

खाली स्रोत से उबरें

कोड सोर्स खाली करके पूर्वावलोकन बनाएं। कार्यक्षेत्र कोड डालने का संदेश देता है और दोनों डाउनलोड बंद रहते हैं। वही दो पंक्तियाँ फिर डालकर दोबारा बनाएं; बदलाव पुराना पूर्वावलोकन मिटा देता है। निर्यात 4,096 पिक्सेल प्रति किनारा सीमा पार करे तो 1× या कम पैडिंग/फ़ॉन्ट आज़माएँ।

कोड से इमेज असल में क्या करता है

जिस फ़ंक्शन पर आपको गर्व है उसकी जगह रिलीज़ नोट्स में है; मुश्किल स्निपेट को इंटरनल विकी समझाना है; कॉन्फ्रेंस स्लाइड को कटे टैब वाले स्क्रीनशॉट के बजाय स्टाइल किया हुआ हिस्सा चाहिए। कोड से इमेज कनवर्टर स्निपेट को लाइन नंबर और विंडो शीर्षक वाले परिष्कृत फ्रेम में बदलता है, और एक्सपोर्ट किया SVG या PNG बिना किसी मैनुअल सफ़ाई के सीधे स्लाइड, दस्तावेज़ और चैट में बैठ जाता है। क्योंकि टोकनाइज़ करना और रेंडर करना इसी टैब में होता है, अनप्रकाशित स्रोत कोड कभी कहीं नहीं जाता।

आम सवाल

स्लाइड के लिए JavaScript की छोटी इमेज कैसे बनाऊँ?
const total = 2 + 3; दर्ज करें और JavaScript, हल्की थीम तथा 1x चुनें। प्रीव्यू बनाएँ और PNG डाउनलोड करें। इमेज में कोड दिखता है, गणना का परिणाम 5 नहीं: यह टूल कोड नहीं चलाता। बड़ी इमेज के लिए 2x चुनकर फिर बनाएँ; चौड़ाई और ऊँचाई दोनों दोगुनी होती हैं।
JSON उदाहरण को SVG में कैसे निर्यात करूँ?
{"ok":true} दर्ज करें, JSON चुनें और प्रीव्यू बनाएँ। आकार बदलने योग्य कोड चित्र के लिए SVG या मौजूदा दृश्य बनाए रखने के लिए PNG डाउनलोड करें। पाठ बदलने पर पुराना प्रीव्यू मिट जाता है, इसलिए फिर बनाएँ। यह इमेज निर्यात है, JSON सत्यापन का परिणाम नहीं।
इनपुट सीमाएं क्या हैं?
कोड के 65,536 UTF-8 बाइट तक, ज़्यादा से ज़्यादा 200 लाइन जिनमें प्रत्येक में 240 अक्षर से अधिक न हों, और 80 अक्षरों या उससे कम का विंडो शीर्षक। एक्सपोर्ट खुद प्रति साइड 4,096 पिक्सल और कुल 16,777,216 पिक्सल पर सीमित है; इन सीमाओं से आगे की चीज़ सटीक संदेश के साथ अस्वीकार होती है।
क्या मेरा कोड अपलोड या एक्ज़ीक्यूट होता है?
दोनों में से कोई नहीं। Shiki टोकनाइज़र इस टैब के अंदर सिर्फ़ तभी लोड होता है जब आप पूर्वावलोकन बनाएं दबाते हैं, पूर्वावलोकन इंजेक्ट किए HTML के बजाय टेक्स्ट टोकन से बनता है, और स्रोत कभी कहीं नहीं भेजा जाता, न ही वर्कस्पेस साफ़ करने के बाद रखा जाता है।
कौन सी भाषाएं और थीम उपलब्ध हैं?
छह भाषाएं — JavaScript, TypeScript, HTML, CSS, JSON और Bash — हर एक अपने Shiki ग्रामर से टोकनाइज़ होती है। लाइट और डार्क थीम GitHub-शैली की पैलेट हैं, और बैकग्राउंड रंग कंट्रोल कार्ड के आसपास के फ्रेम को आपकी चुनी थीम से स्वतंत्र रूप से स्टाइल करता है।
एक्सपोर्ट स्केल क्या बदलता है?
1x मापे गए इमेज आयाम इस्तेमाल करता है। 2x चौड़ाई और ऊंचाई दोनों दोगुनी करता है, जिससे PNG पिक्सल चार गुना हो जाते हैं; यह कोड विवरण नहीं जोड़ता, न टेक्स्ट बदलता है। दोनों स्केल एक्सपोर्ट सीमाओं में समाने चाहिए। एक्सपोर्ट बहुत बड़ा हो तो स्केल घटाएं।
SVG डाउनलोड करूं या PNG?
PNG यहां रेंडर किए पिक्सल सुरक्षित रखता है। SVG स्केल करने योग्य रहता है; बिना अपलोड किए फ़ॉन्ट के यह सिस्टम फ़ॉन्ट पर निर्भर करता है, जो दूसरे डिवाइस पर बदल सकते हैं। स्वीकृत अपलोड किया फ़ॉन्ट पूरा एम्बेड होता है, लेकिन गंतव्य व्यूअर को एम्बेड किए फ़ॉन्ट सपोर्ट करने चाहिए। जब एकसमान रूप-रंग मायने रखे तो PNG इस्तेमाल करें।
सेटिंग बदलने पर पूर्वावलोकन क्यों गायब हुआ?
डिज़ाइन से: कोड, भाषा, थीम, बैकग्राउंड, पैडिंग, फ़ॉन्ट साइज़, शीर्षक, लाइन नंबर या स्केल में कोई भी संपादन पुराने पूर्वावलोकन को अमान्य कर देता है, बासी इमेज दिखाने के बजाय। अपडेट किया फ्रेम रेंडर करने के लिए पूर्वावलोकन बनाएं दोबारा दबाएं।
कौन से फ़ॉन्ट एम्बेड कर सकता/सकती हूँ?
TTF/OTF, 24 MiB तक। ऐसा फ़ॉन्ट चुनें जिसे आप एम्बेड कर सकते हों। अप्रतिबंधित एम्बेडिंग वाले स्टैटिक आउटलाइन फ़ॉन्ट सपोर्टेड हैं; वेरिएबल/कलर फ़ॉन्ट अस्वीकार होते हैं। SVG में पूरा फ़ॉन्ट शामिल होता है। गायब ग्लिफ़ बनाना रोक देते हैं। कोई फ़ाइल अपलोड नहीं होती। बिना फ़ॉन्ट के, SVG सिस्टम फ़ॉन्ट इस्तेमाल करता है।

पढ़ते रहें

डेवलपर में जारी रखें

संबंधित काम, कोई बंद गली नहीं।

पूरे इंडेक्स पर लौटे बिना किसी दूसरे केंद्रित वर्कस्पेस में जाएँ।

URL स्लग जनरेटर

URL Slug Generator

टाइटल से साफ़ URL slug बनाएँ — एक्सेंट हटते हैं, & को 'and' बनता है, हर स्क्रिप्ट के अक्षर बचे रहते हैं। हाइफ़न या अंडरस्कोर चुनें; टाइप करते ही नतीजा।

बनाएँ

React Native के लिए शैडो

React Native Shadow Generator

iOS शैडो और Android elevation सेट करें, पुराने shadow और नए boxShadow सिंटैक्स की तुलना करें, प्लेटफ़ॉर्म सीमाएँ देखें और तैयार स्टाइल कॉपी करें।

बनाएँ

Base64 एन्कोडर/डिकोडर

Base64 Encoder/Decoder

यूनिकोड टेक्स्ट एनकोड करें या Base64 डिकोड करें — URL-सेफ़ वेरिएंट और लाइव वैलिडेशन सहित, पूरी तरह लोकल; Swap से राउंड-ट्रिप एक क्लिक में।

बदलें

HTML एन्कोडर/डिकोडर

HTML Encoder/Decoder

रिज़र्व्ड HTML अक्षर एनकोड करें या एंटिटी डिकोड करें — लाइव नतीजा और Swap से दोतरफ़ा जाँच; कॉपी या डाउनलोड करें, सब कुछ लोकल वर्कस्पेस में।

बदलें