محوّل HTML إلى صورة

الصق مقتطف HTML. تُزال السكربتات والنماذج والإطارات ومعالجات الأحداث قبل التصيير.

يبقى كود HTML والصورة الناتجة في هذا المتصفح. تُجلب الصور والخطوط وأوراق الأنماط البعيدة من عناوينها الأصلية، لذا استخدم بيانات مضمّنة لتصيير بلا اتصال.

حوّل مقتطف HTML وCSS إلى صورة PNG أو JPG ثابتة الأبعاد من دون رفع المصدر أو الصورة إلى Hyperion. اختر من ٦٤ إلى ١٬٩٢٠ بكسل لكل ضلع وتكبيرًا من 1x إلى 3x، ثم عاين النتيجة ونزّلها داخل المتصفح.

كيفية تصيير HTML كصورة

  1. 1

    الصق الكود

    أدخل مقتطفًا أو مستند HTML. يدعم CSS المضمّن وقواعد `<style>`، وتُزال السكربتات والنماذج والإطارات ومعالجات الأحداث.

  2. 2

    اضبط اللوحة

    اختر PNG أو JPG، وأدخل العرض والارتفاع وحدد تكبيرًا من 1x إلى 3x.

  3. 3

    صيّر المعاينة

    يرتّب المتصفح الكود المنقّى داخل إطار معزول وثابت الأبعاد.

  4. 4

    نزّل محليًا

    احفظ PNG أو JPG مباشرة. لا تُرفع الصورة الناتجة إلى Hyperion.

ما الذي يدعمه محرّك التصيير في المتصفح

يستخدم المحوّل محرّك تخطيط المتصفح، لذلك يمكن أن يظهر في النتيجة HTML المعتاد وCSS المضمّن وقواعد <style> وتخطيطات Flexbox وGrid والتدرجات والظلال وSVG المضمّن والخطوط المثبتة. الناتج صورة نقطية ثابتة، وليس نسخة تفاعلية من الصفحة.

قواعد اللوحة والناتج

الإعداد النطاق المدعوم السلوك
العرض من ٦٤ إلى ١٬٩٢٠ px عرض CSS الدقيق لإطار الالتقاط
الارتفاع من ٦٤ إلى ١٬٩٢٠ px ارتفاع CSS الدقيق، ويُقص المحتوى الزائد
التكبير من 1x إلى 3x يرفع الدقة من دون تغيير حجم التخطيط
PNG صورة ثابتة الأبعاد يحافظ على المساحات الشفافة
JPG صورة ثابتة الأبعاد يستخدم جودة ٩٢٪ وخلفية بيضاء

يقتصر الناتج على ١٦ ميغابكسل لحماية ذاكرة المتصفح. إذا تجاوزت الأبعاد والتكبير هذا الحد، تخفّض الأداة التكبير إلى أعلى خطوة آمنة بفاصل 0.5x. يقتصر مصدر HTML على ١٠٠٬٠٠٠ حرف.

الخصوصية والموارد البعيدة

يبقى HTML وصورة البيانات الناتجة في المتصفح الحالي. في الوضع المتدرج، يحتفظ مخزن جلسة علامة التبويب بالإعدادات حتى الخطوة التالية، ويؤدي البدء من جديد إلى حذفها. لا ترسل الأداة الكود أو الصورة إلى Hyperion.

عنوان URL الخارجي استثناء. تُطلب الصور وخطوط الويب وأوراق الأنماط البعيدة من خوادمها الأصلية التي يمكنها رؤية الطلب. وقد يمنع CORS أو تقييد الوصول تحميلها. ضمّن الصور والخطوط كعناوين بيانات، وأبق CSS داخل الكود عندما تحتاج إلى تصيير بلا اتصال بالكامل.

حدود الأمان ودقة العرض

تُزال السكربتات والنماذج والإطارات المتداخلة والكائنات المضمّنة وسمات الأحداث قبل الالتقاط. تصبح المعاينة غير تفاعلية، لكن هذه المعالجة لا تغني عن منقٍّ عام لـHTML عند نشر المحتوى في مكان آخر. لا تعمل عناصر JavaScript، ولا تُضمن حالة الفيديو وcanvas، وتصبح الحركة لقطة ثابتة واحدة، وقد يختلف CSS الخاص بمتصفح معيّن في محرّك آخر.

الأسئلة الشائعة

نعم. يأخذ محرّك التصيير قواعد <style> وروابط أوراق الأنماط المدعومة من قسم head، ثم يلتقط محتوى body. تُزال السكربتات والبيانات الوصفية والنماذج والإطارات والمعالجات النشطة، لذلك لا تكون النتيجة صفحة قابلة للتصفح.

قد يمنع الخادم الأصلي الاستخدام عبر النطاقات أو يطلب تسجيل الدخول أو يتأخر في الاستجابة. استخدم عنوانًا متاحًا يسمح بـCORS، أو ضمّن المورد كعنوان بيانات.

يحافظ PNG على البكسلات الشفافة. يستخدم JPG خلفية بيضاء وجودة ثابتة قدرها ٩٢٪، ويكون غالبًا أصغر مع الصور الفوتوغرافية. لا تصدّر الأداة WebP ولا توفر ضبطًا منفصلًا للجودة.

يحد المحوّل الناتج عند ١٦ ميغابكسل. مع اللوحة الكبيرة يختار تلقائيًا أعلى خطوة آمنة بفاصل 0.5x حتى لا تنفد ذاكرة المتصفح.

أدوات ذات صلة