محوّل HTML إلى صورة
الصق مقتطف HTML. تُزال السكربتات والنماذج والإطارات ومعالجات الأحداث قبل التصيير.
حوّل مقتطف HTML وCSS إلى صورة PNG أو JPG ثابتة الأبعاد من دون رفع المصدر أو الصورة إلى خوادمنا. اختر من ٦٤ إلى ١٬٩٢٠ بكسل لكل ضلع وتكبيرًا من 1x إلى 3x، ثم عاين النتيجة ونزّلها داخل المتصفح.
كيفية تصيير HTML كصورة
-
1
الصق الكود
أدخل مقتطفًا أو مستند HTML. يدعم CSS المضمّن وقواعد `<style>`، وتُزال السكربتات والنماذج والإطارات ومعالجات الأحداث.
-
2
اضبط اللوحة
اختر PNG أو JPG، وأدخل العرض والارتفاع وحدد تكبيرًا من 1x إلى 3x.
-
3
صيّر المعاينة
يرتّب المتصفح الكود المنقّى داخل إطار معزول وثابت الأبعاد.
-
4
نزّل محليًا
احفظ PNG أو JPG مباشرة. لا تُرفع الصورة الناتجة إلى خوادمنا.
ما الذي يدعمه محرّك التصيير في المتصفح
يستخدم المحوّل محرّك تخطيط المتصفح، لذلك يمكن أن يظهر في النتيجة HTML المعتاد وCSS المضمّن وقواعد <style> وتخطيطات Flexbox وGrid والتدرجات والظلال وSVG المضمّن والخطوط المثبتة. الناتج صورة نقطية ثابتة، وليس نسخة تفاعلية من الصفحة.
قواعد اللوحة والناتج
| الإعداد | النطاق المدعوم | السلوك |
|---|---|---|
| العرض | من ٦٤ إلى ١٬٩٢٠ px | عرض CSS الدقيق لإطار الالتقاط |
| الارتفاع | من ٦٤ إلى ١٬٩٢٠ px | ارتفاع CSS الدقيق، ويُقص المحتوى الزائد |
| التكبير | من 1x إلى 3x | يرفع الدقة من دون تغيير حجم التخطيط |
| PNG | صورة ثابتة الأبعاد | يحافظ على المساحات الشفافة |
| JPG | صورة ثابتة الأبعاد | يستخدم جودة ٩٢٪ وخلفية بيضاء |
يقتصر الناتج على ١٦ ميغابكسل لحماية ذاكرة المتصفح. إذا تجاوزت الأبعاد والتكبير هذا الحد، تخفّض الأداة التكبير إلى أعلى خطوة آمنة بفاصل 0.5x. يقتصر مصدر HTML على ١٠٠٬٠٠٠ حرف.
الخصوصية والموارد البعيدة
يبقى HTML وصورة البيانات الناتجة في المتصفح الحالي. في الوضع المتدرج، يحتفظ مخزن جلسة علامة التبويب بالإعدادات حتى الخطوة التالية، ويؤدي البدء من جديد إلى حذفها. لا ترسل الأداة الكود أو الصورة إلى خوادمنا.
عنوان URL الخارجي استثناء. تُطلب الصور وخطوط الويب وأوراق الأنماط البعيدة من خوادمها الأصلية التي يمكنها رؤية الطلب. وقد يمنع CORS أو تقييد الوصول تحميلها. ضمّن الصور والخطوط كعناوين بيانات، وأبق CSS داخل الكود عندما تحتاج إلى تصيير بلا اتصال بالكامل.
حدود الأمان ودقة العرض
تُزال السكربتات والنماذج والإطارات المتداخلة والكائنات المضمّنة وسمات الأحداث قبل الالتقاط. تصبح المعاينة غير تفاعلية، لكن هذه المعالجة لا تغني عن منقٍّ عام لـHTML عند نشر المحتوى في مكان آخر. لا تعمل عناصر JavaScript، ولا تُضمن حالة الفيديو وcanvas، وتصبح الحركة لقطة ثابتة واحدة، وقد يختلف CSS الخاص بمتصفح معيّن في محرّك آخر.
الأسئلة الشائعة
نعم. يأخذ محرّك التصيير قواعد <style> وروابط أوراق الأنماط المدعومة من قسم head، ثم يلتقط محتوى body. تُزال السكربتات والبيانات الوصفية والنماذج والإطارات والمعالجات النشطة، لذلك لا تكون النتيجة صفحة قابلة للتصفح.
قد يمنع الخادم الأصلي الاستخدام عبر النطاقات أو يطلب تسجيل الدخول أو يتأخر في الاستجابة. استخدم عنوانًا متاحًا يسمح بـCORS، أو ضمّن المورد كعنوان بيانات.
يحافظ PNG على البكسلات الشفافة. يستخدم JPG خلفية بيضاء وجودة ثابتة قدرها ٩٢٪، ويكون غالبًا أصغر مع الصور الفوتوغرافية. لا تصدّر الأداة WebP ولا توفر ضبطًا منفصلًا للجودة.
يحد المحوّل الناتج عند ١٦ ميغابكسل. مع اللوحة الكبيرة يختار تلقائيًا أعلى خطوة آمنة بفاصل 0.5x حتى لا تنفد ذاكرة المتصفح.
أدوات ذات صلة
مولّد إعدادات Webpack
أنشئ ملف webpack.config.js لـ webpack 5 لمشاريع JavaScript الخالصة أو React أو Vue: مع TypeScript وBabel وCSS أو Sass والصور وHtmlWebpackPlugin وخادم التطوير وسطر npm install.
عدّاد FPS
قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.
مرجع جدول ASCII
جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.
مدقّق OpenAPI
الصق مستند OpenAPI أو Swagger بصيغة JSON أو YAML وافحص بنيته الأساسية: حقل الإصدار وكائن info والمسارات، مع أخطاء وتحذيرات واضحة.
منسّق PHP
أضف فواصل أسطر ومسافات بادئة من مسافتين أو 4 مسافات إلى مقطع PHP بسيط. راجع النتيجة: فهذه الأداة ليست محلّل PHP ولا تطبّق PSR-12.
مولّد مؤشرات التحميل بلغة CSS
أنشئ دوّارًا دائريًا بـ CSS خالص: اضبط القطر وسماكة الحدود واللون وسرعة الدوران، وشاهد المعاينة المباشرة، وانسخ كود CSS جاهزًا للاستخدام. بلا SVG وبلا JavaScript.
الأداة متاحة بلغات أخرى
- Convertisseur HTML en image [FR]
- HTML 이미지 변환기 [KO]
- Konverter HTML ke gambar [ID]
- HTML-naar-afbeelding-converter [NL]
- HTML till bild-konverterare [SV]
- เครื่องมือแปลง HTML เป็นรูปภาพ [TH]
- HTML-zu-Bild-Konverter [DE]
- HTML画像変換ツール [JA]
- Convertidor de HTML a imagen [ES]
- Konwerter HTML na obraz [PL]
- Công cụ chuyển HTML thành ảnh [VI]
- Conversor de HTML para imagem [PT]
- HTML to Image Converter [EN]
- Convertitore da HTML a immagine [IT]
- Конвертер HTML в изображение [RU]
- HTML'den görsele dönüştürücü [TR]
- HTML 转图片工具 [ZH]