تحويل الكود إلى صورة
الصق مقتطف كود، واختر واحدة من السمات الأربع المدمجة، واضبط الألوان وحجم الخط والحشو والترويسة الاختيارية وأرقام الأسطر، ثم نزّل ملف PNG مرسوما من canvas داخل المتصفح. ترسم الأداة نصا عاديا، لذلك تصلح لصور كود نظيفة، لكنها لا تحلل لغات البرمجة ولا تضيف تمييزا نحويا.
طريقة إنشاء PNG للكود
-
1
الصق المقتطف
استخدم مربع الكود مع JavaScript أو HTML أو CSS أو JSON أو أوامر shell أو أي نص عادي آخر. يعرض الرسام أول 400 سطر كحد أقصى.
-
2
اضبط الشكل
اختر داكن أو فاتح أو Dracula أو Solarized، ثم عدّل العنوان وحجم الخط والحشو والخلفية والنص ولون التمييز.
-
3
راجع canvas
يرسم المتصفح كل سطر كنص على canvas، مع ترويسة نافذة وأرقام أسطر اختيارية. قد توسّع الأسطر الطويلة canvas حتى الحد الأقصى المدمج.
-
4
نزّل PNG
صدّر canvas الحالي كصورة PNG للتوثيق أو الملاحظات أو الشرائح أو المنشورات. لا يوجد تصدير SVG أو JPEG أو HTML.
ما الذي يفعله الرسام
| التحكم | ما يمكنك تغييره | ملاحظات |
|---|---|---|
| السمة | داكن، فاتح، Dracula، Solarized | تضبط كل سمة ألوان الخلفية والنص والتمييز الابتدائية. |
| نمط النص | العنوان، حجم الخط، الحشو | حجم الخط محدود بين 10 و40 px، والحشو بين 20 و200 px. |
| الألوان | الخلفية، النص، التمييز | يستخدم لون التمييز مع أرقام الأسطر. |
| الترويسة | ترويسة بنمط نافذة مفعلة أو معطلة | يظهر العنوان في الترويسة عند تفعيلها. |
| أرقام الأسطر | إظهار أو إخفاء | ترسم الأرقام كنص عادي على canvas. |
| التصدير | تنزيل PNG | يحفظ زر التنزيل canvas الحالي كصورة PNG. |
حدود عملية
- يرسم المتصفح المقتطف كنص عادي باستخدام Canvas API. لا يتعرف على JavaScript أو Python أو HTML أو أي لغة أخرى.
- تستخدم المعاينة أول 400 سطر حتى لا تتسبب الملفات الكبيرة جدا في تجميد الصفحة.
- يبقى عرض canvas بين 420 px و2200 px. قد تصل الأسطر الطويلة جدا إلى العرض الأقصى.
- تتكون الواجهة ذات الخطوتين من صفحة تحرير وصفحة تنزيل، وتحفظ مدخلاتك في
sessionStorageللتبويب الحالي أثناء الانتقال بينهما.
ملاحظة حول إمكانية الوصول
الكود داخل الصورة غير قابل للبحث أو النسخ ولا يمكن لقارئات الشاشة قراءته. استخدم PNG كدعم بصري، واترك المقتطف الحقيقي بجانبه كنص قابل للتحديد عند نشر التوثيق أو الدروس أو تقارير الأخطاء.
الأسئلة الشائعة
لا. ترسم النص الذي تلصقه كما هو على canvas. يمكنك تغيير الألوان والسمات، لكن لا يوجد اختيار لغة أو محلل صياغة.
تتضمن القائمة داكن وفاتح وDracula وSolarized. بعد اختيار السمة يمكنك أيضا تعديل ألوان الخلفية والنص والتمييز.
لا. الناتج هو تنزيل PNG منشأ من canvas. لا يوجد تصدير SVG أو JPEG أو نسخ كـ HTML.
ترسم المعاينة أول 400 سطر حتى يبقى المتصفح سريع الاستجابة. للصور المنشورة، من الأفضل غالبا الاكتفاء بالأسطر القليلة التي تشرح الفكرة.
أدوات ذات صلة
مرجع جدول ASCII
جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.
مرجع أحرف HTML
قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.
مرجع اختصارات لوحة المفاتيح
ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.
عدّاد FPS
قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.
منسق JSON
الصق JSON لتنسيقه بمسافتين أو أربع مسافات، أو تصغيره إلى ناتج مضغوط، أو فحص بنيته بسرعة قبل نسخ النتيجة.
مولد لوحة الألوان
أنشئ لوحات ألوان أحادية أو متجاورة أو مكملة أو ثلاثية أو رباعية من لون HEX أساسي، ثم صدّر متغيرات CSS جاهزة للنسخ.
الأداة متاحة بلغات أخرى
- 코드를 이미지로 [KO]
- Mã sang ảnh [VI]
- Code naar afbeelding [NL]
- 代码转图片 [ZH]
- Code zu Bild [DE]
- Code to Image [EN]
- Kode ke gambar [ID]
- Kod till bild [SV]
- Kod na obraz [PL]
- โค้ดเป็นรูปภาพ [TH]
- Código a imagen [ES]
- Code en image [FR]
- Código para imagem [PT]
- コードを画像に変換 [JA]
- Kodu görsele dönüştür [TR]
- Codice in immagine [IT]
- Код в изображение [RU]